Question

我公司刚刚从2007年开始转向SharePoint 2013.除了一些后端更改（与此主题无关）之外，以前格式正确的脚本似乎不再有效。功能方面它是相同的但是拉伸宽度的能力：100％;似乎已经失去了。

我尝试了内联格式化，稍微操纵css（设置最小宽度并将宽度更改为px而不是％），并将事物放入容器中以查看是否有影响。没什么可比的。

这一切都存在于SharePoint页面上的ScriptEditor webpart中，因此我认为编辑文档的Body样式不会做太多。

与往常一样，您的意见真诚地受到赞赏。谢谢， -BR89

JQuery的

$(document).ready(function () {
$('.policy').hide().before('<a href="#" id="toggle-policy" class="button">Open/Close Policy Central Live View</a>');
$('a#toggle-policy').click(function () {
    $('.policy').slideToggle(1000);
    return false;
    });
});

 $(document).ready(function () {
 $('.practice').hide().before('<a href="#" id="toggle-practice" class="button2">Open/Close Practice Council View</a>');
 $('a#toggle-practice').click(function () {
    $('.practice').slideToggle(1000);
    return false;
     });
 }); 

  $(document).ready(function () {
  $('.video').hide().before('<a href="#" id="toggle-video" class="button">Open/Close Video Tutorial</a>');
  $('a#toggle-video').click(function () {
    $('.video').slideToggle(1000);
    return false;
     });
 });

 $(document).ready(function () {
 $('.resources').hide().before('<a href="#" id="toggle-resources" class="button2">Open/Close Resources</a>');
 $('a#toggle-resources').click(function () {
    $('.resources').slideToggle(1000);
    return false;
       });
   });

HTML

<body>
<div id="container">
<div class="policy">
    <iframe src="http://duckduckgo.com" width="100%" height="600"></iframe>
</div>
<br>
<br>
<div class="practice">
    <iframe src="http://duckduckgo.com" width="100%" height="600"></iframe>
</div>
<br>
<br>
<div class="video">
    <center>
        <iframe width="650" height="450" src="http://duckduckgo.com" frameborder="0" allowfullscreen></iframe>
    </center>
</div>
<br>
<br>
<div class="resources">
    <center>
        <p><a href="http://duckduckgo.com">This is filler</a>

            <br>
            <br>Filler
            <br>
            <br>Filler
                </p>
    </center>
</div>

CSS

#container {
width: 100%;
border: 5px solid;
}

.button {
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px  1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
background:#0082d1;
width:100%;
border:0;
color:black;
cursor:pointer;
font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
margin:0px;
padding:6px 4px;
text-decoration:none;
position:relative;
text-align:center;
}


.button2{
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px  1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
background:#003a6f;
width:100%;
border:0;
color:black;
cursor:pointer;
font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
margin:auto;
padding:6px 10px;
text-decoration:none;
position:relative;
text-align:center;
}

Answer 1

同时添加display: block和width: 100%将确保它们像您想要的那样伸展。

我刚刚从.button2移除了设置宽度，并将display: block添加到了两者（所有CSS中）。默认情况下，block元素将占用可用宽度的100％。

我不推荐重要的规则，但是这段代码将确保不会覆盖所需的样式。最好删除覆盖它的样式，或者在旧样式之后将它们覆盖，以覆盖它们。如果您执行其中任何一项操作，则此代码块将很好，没有重要规则。

.button, .button2 {
  display: block !important;

  width: auto !important;
  /* or this */
  width: 100% !important;
}

无法将JQuery Element宽度设置为100％

1 个答案: