CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer
Barak Shoushan
Barak Shoushan

Reputation: 75

Can't scroll when content overflows

I have a drop down menu who works perfectly on Chrome however, the data overflow out of the list and I can't scroll down. I tried to user "overflow:hidden" but it just made the overflow data hidden without the ability to scroll down on both Chrome and Explorer.

<div class="dropdown info-required">
    <button name="mccGroupButton" class="btn btn-default text-left dropdown-toggle 
                 requiredInput picklistOverflow form-control" type="button" 
                 id="mccGroupButtonId" data-toggle="dropdown" aria-expanded="true" 
                 style="text-align: left !important; padding-right:5px;width:140px;
                 position: relative;"> 
      <span id="chosenGroup"></span>
      <span class="mccArrow">▾</span>
    </button>
  <ul id="mccGroupUlId" class="dropdown-menu picklistValuesOverflow" role="menu" 
          aria-labelledby="mccGroupButtonId" style="width:auto;min-width:250px;
          height:220px; bottom: 0px;">
  </ul>
</div>

Upvotes: 0

Views: 1669

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

With overflow:hidden any content that is larger than your fixed-size div will be hidden.

Instead, use 

overflow:scroll

this will force a scroll bar to be shown at all times. It will be disabled when not needed and automatically be enabled as needed. This ensures your content looks the same at all times.

The alternative is:

overflow:auto

or

overflow-y:auto

which will only show the scroll bar as needed - but if your content is changed dynamically, can force the layout to change. So which to use depends on your requirements.

Example of each:

div {
border:1px solid #CCC;
float:left;
width:75px;
height:75px;
}
<div style='overflow:auto'>
auto 
</div>
<div style='overflow:auto'>
auto<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow:scroll'>
scroll<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow-y:scroll'>
scroll-y<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
<div style='overflow:hidden'>
hidden<br/>
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>

Upvotes: 2

Shaik
Shaik

Reputation: 378

<ul id="mccGroupUlId" class="dropdown-menu picklistValuesOverflow" role="menu" 
          aria-labelledby="mccGroupButtonId" style="width:auto;min-width:250px;
          height:auto; bottom: 0px;">

make height:auto;

it wont give scroll fill the height total content

Upvotes: 0

Related Questions