CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3
Sean Magyar
Sean Magyar

Reputation: 2380

bootstrap scrollable dropdown menu with fixed last element after separator

I'm using bootstrap3 with dropdown menu. I wanna have the list items scrollable except the last one (after the separator) which always should be visible and fixed at the end of the list. I have the following code at the moment and my problem is that with this code the last element is also scrollable and I don't know what I should do.

What should I change in the code?

<ul class = "dropdown-menu scrollable-bootstrap-menu">
  <li><a href='#'>item1</a></li>         //from here
  <li><a href='#'>item2</a></li>
  <li><a href='#'>item3</a></li>
  <li><a href='#'>item4</a></li>        //to here should be scrollable
  <li role="separator" class="divider"></li>
  <li><a href='#'>View all items</a></li> //should be non scrollable (always visible/fixed)
</ul>

css

.scrollable-bootstrap-menu {
  height: auto;
  max-height: 100px;
  overflow-x: hidden;
}

Upvotes: 2

Views: 3773

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Try: css:

.scrollable-bootstrap-menu {
height: auto;
  max-height: 100px;
  overflow-x: hidden;
position:relative;
}
.scrollable-bootstrap-menu li:last-child {
position:absolute;
bottom:0;
}

js:

$('.scrollable-bootstrap-menu').scroll(function(){
$('.scrollable-bootstrap-menu li:last-child').css('bottom',-$(this).scrollTop());

});

https://jsfiddle.net/vyLk778k/1/

Upvotes: 1

Chris
Chris

Reputation: 59511

The only way that I know to do this is to have a list within a list. Like this:

<ul class="dropdown-menu scrollable-bootstrap-menu">
  <li>
    <ul>
      <li><a href='#'>item1</a></li>
      <li><a href='#'>item2</a></li>
      <li><a href='#'>item3</a></li>
      <li><a href='#'>item4</a></li>
    </ul>
  </li>
  <li role="separator" class="divider"></li>
  <li><a href='#'>View all items</a></li>
</ul>

And then set the inner list one to scroll on overflow.

.scrollable-bootstrap-menu ul {
  height: auto;
  max-height: 50px;
  overflow-x: hidden;
}

Here's a demo (without much styling, but it works):

Demo

Or check the full code below:

.scrollable-bootstrap-menu ul {
  height: auto;
  max-height: 50px;
  overflow-x: hidden;
}

ul {
  list-style: none;
  padding: 5px 0;
}
<ul class="dropdown-menu scrollable-bootstrap-menu">
  <li>
    <ul>
      <li><a href='#'>item1</a></li>
      <li><a href='#'>item2</a></li>
      <li><a href='#'>item3</a></li>
      <li><a href='#'>item4</a></li>
    </ul>
  </li>
  <li role="separator" class="divider"></li>
  <li><a href='#'>View all items</a></li>
</ul>

Upvotes: 3

Related Questions