CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Cindrella
Cindrella

Reputation: 1721

Css Issue When Scroll is applied for bootstrap drop down menu

I have large list in my dropdown menu. so I have applied scroll to it. I want to show my dropdown menu always on top of link.

Below is my code:

<div class="clean-dropdown">
 <a class="dropdown-toggle" href="javascript: void(0);" data-toggle="dropdown" id="add-more">
  add more
</a> 
 <ul class="dropdown-menu" id="dropdown-list">
  <li><a href="#" >1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li><li><a href="#">6</a></li>
 <li><a href="#">7</a></li>
 <li><a href="#">8</a></li><li><a href="#">8</a></li><li><a href="#">10</a></li>
 <li><a href="#">11</a></li>
 <li><a href="#">12</a></li><li><a href="#">13</a></li>
 <li><a href="#">14</a></li><li><a href="#">15</a></li><li><a href="#">16</a></li>
 <li><a href="#">17</a></li>
</ul>
</div>

css:

#dropdown-list{
max-height: 200px;
overflow: auto;
top: 15px;
position: relative;
left: 50px
}

#add-more{
top: 224px;
position: relative;

}

Here is the fiddle for this: http://jsfiddle.net/52VtD/141/

Problem is when I click on add more link dropdown shows. Dont move the cursor. The last item is shown as selected and this happens only in chrome.

enter image description here

If we see in console. Then li's are out of dropdown menu. I think thats why the last item is being shown as selected.

How to fix this issue.

Upvotes: 1

Views: 11756

Answers (3)

Cindrella
Cindrella

Reputation: 1721

The last element in dropdown is selected because li's are out of dropdown. Even if we focus on Add more it is being overridden by the focus of li's and getting selected.

To fix this issue I have removed the box-shadow in css. It did trick for me.

#dropdown-list{
 max-height: 200px;
 overflow: auto;
 top: 33px;
 position: relative;
 left: 50px;
 box-shadow: none;
 }

Here is the updated Fiddle: http://jsfiddle.net/52VtD/158/

Upvotes: 1

omma2289
omma2289

Reputation: 54619

Simply setting position:relative on the list items seems to solve the issue:

Updated fiddle

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49044

The problem is caused by your max-height: 200px; if you check the mouse pointer (under chrome) you will see the focus area of your last li is far outside your dropdown (caused by the z-index?). In some cases this area will overlap your "add" link.

To prevent set you max-height: according the number of items you want to show. For example for 7 items set max-height: to 7 x 26 (default height of a li in the dropdown) + 5 (default padding of the ul) 187px;

Upvotes: 0

Related Questions