CODEWITHSUNDEEP
jqueryhtmlcsssharepoint
BR89
BR89

Reputation: 716

Cannot get JQuery Element width to 100%

My company just recently switched to SharePoint 2013 from 2007. Aside from some back end changes (which are not related to this topic) it appears a script that previously was formatted correctly is no longer behaving. Functionwise it is the same but the ability to stretch width:100%; seems to have been lost.

I've tried inline formating, manipulating the css a bit (setting min-widths and changing widths to px instead of %), and putting things in a container to see if that had an impact. Nothing as of yet unfortunately.

This all lives in a ScriptEditor webpart on a SharePoint page, so I don't think I can do much to edit the Body style of the document.

As always, your input is sincerely appreciated. Thanks, -BR89

Link to JS Fiddle

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;
}

Upvotes: 0

Views: 147

Answers (1)

m59
m59

Reputation: 43755

Adding both display: block and width: 100% will ensure they stretch like you want.

I just removed the set width from .button2 and added display: block to both (all in the CSS). By default, block elements will take up 100% of the available width.

I don't recommend the important rules, but this block of code will ensure nothing overwrites the needed styles. It would be better to remove the styles that overwrite this or put this after the old styles to that these overwrite them. If you do either of those, this code block will be great without the important rules.

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

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

Upvotes: 1

Related Questions