無法將JQuery元素寬度設置爲100％

我的公司最近剛剛從2007年切換到SharePoint 2013.除了一些後端更改（與此主題無關）之外，它顯示之前格式正確的腳本不再行爲。功能上它是相同的，但能夠拉伸寬度：100％;似乎已經失傳。無法將JQuery元素寬度設置爲100％

我試過內聯格式化，操縱css一點（設置最小寬度和寬度更改爲px而不是％），並將其放入容器中以查看是否有影響。迄今爲止還沒有任何遺憾。

這一切都住在SharePoint頁面上的ScriptEditor webpart上，所以我不認爲我可以做很多工作來編輯文檔的主體樣式。

一如既往，您的意見是真誠的讚賞。謝謝， -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; 
}

來源

2014-01-21 BR89

我看到你以前沒有接受過SO的答案。如果您讚賞我的回答，請不要忘記使用答案左側的複選標記（在投票箭頭下方）接受答案。這也會給你一些聲望點。如果你還沒有參加SO巡演，請點擊此處查看：http://stackoverflow.com/tour – m59

對延期抱歉。被團隊成員拉走 – BR89

同時添加display: block和width: 100%將確保它們伸展得像你想要的。

我剛剛從.button2中刪除了設置寬度，並將display: block添加到了兩個（全部在CSS中）。默認情況下，block元素將佔用可用寬度的100％。

我不推薦重要的規則，但是這塊代碼將確保不會覆蓋所需的樣式。最好刪除覆蓋它的樣式，或者在舊樣式之後放置它們以覆蓋它們。如果你做了其中的任何一個，那麼這個代碼塊將會很棒，沒有重要的規則。

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

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

來源

2014-01-21 16:43:53 m59

正是我需要的！非常感謝！ – BR89

無法將JQuery元素寬度設置爲100％

回答

相關問題