Add Scrollbar on Dropdown Menu Options

Add scrollbar on dropdown menu options

This is also I nice way of handeling it :)

http://css-tricks.com/long-dropdowns-solution/

From the link above:

var maxHeight = 400; $(function(){

$(".dropdown > li").hover(function() {

var $container = $(this),
$list = $container.find("ul"),
$anchor = $container.find("a"),
height = $list.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller

// need to save height here so it can revert on mouseout
$container.data("origHeight", $container.height());

// so it can retain it's rollover color all the while the dropdown is open
$anchor.addClass("hover");

// make sure dropdown appears directly below parent list item
$list
.show()
.css({
paddingTop: $container.data("origHeight")
});

// don't do any animation if list shorter than max
if (multiplier > 1) {
$container
.css({
height: maxHeight,
overflow: "hidden"
})
.mousemove(function(e) {
var offset = $container.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
if (relativeY > $container.data("origHeight")) {
$list.css("top", -relativeY + $container.data("origHeight"));
};
});
}

}, function() {

var $el = $(this);

// put things back to normal
$el
.height($(this).data("origHeight"))
.find("ul")
.css({ top: 0 })
.hide()
.end()
.find("a")
.removeClass("hover");

});

// Add down arrow only to menu items with submenus
$(".dropdown > li:has('ul')").each(function() {
$(this).find("a:first").append("<img src='images/down-arrow.png' />");
});

});

How to add scrollbar in dropdown menu

Instead of specifying x-axis and y-axis specifically you can only write overflow as it will automatically takes and adjust both the axis.

You can also use overflow: auto instead of overflow: scroll the reason is that in scroll (Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content),

auto ( it solves the problem of getting scrollbars when you don't need them. The scrollbars will only show up if there is content that actually breaks out of the element).

I have updated the code and it works fine just have a look.

.dropdown-scrollbar{    height: 50px;    overflow: scroll;
}
<ul class="dropdown-menu dropdown-scrollbar">
<!-- <li><a href="#"></a></li> --> {% for table_name in obj %} <option>{{ table_name.table_name }}</option> {% endfor %} <!-- <li><a href="#">Dropdown link</a></li> --></ul>

How to add vertical scrollbar to select box options list?

Overflow-y doesn't work on select boxes. What I would recommend using is size on your select box. In my example I've used 5 as the value, you can obviously change this to your liking.

.wrapper{width:200px;padding:20px;height: 150px;}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">            <div class="wrapper"><select name="" id="" class="form-control" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>    <option value="">One</option>    <option value="">Two</option>    <option value="">Three</option>    <option value="">Four</option>    <option value="">Five</option>    <option value="">Six</option>    <option value="">Seven</option>    <option value="">Eight</option>    <option value="">Nine</option>    <option value="">Ten</option></select></div>

Dropdown menu causes scrollbar

Could you try this?

<div class="dropdown">
<button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>

I added dropdown-menu-right to the dropdown-menu

You may find that pull-right works if you're using an older version.

Need Scroll Bar for Drop Down List populated by ng-options

<select onfocus='if(this.options.length > 8){ this.size = 8; }' onblur='this.size=1;' onchange='this.size=1; this.blur();'>  <option>1</option>  <option>2</option>  <option>3</option>  <option>4</option>  <option>5</option>  <option>6</option>  <option>7</option>  <option>8</option>  <option>9</option>  <option>10</option></select><br><select onfocus='if(this.options.length > 8){ this.size = 8; }' onblur='this.size=1;' onchange='this.size=1; this.blur();'>  <option>1</option>  <option>2</option>  <option>3</option>  <option>4</option></select>

How to add a scrollbar to a Menu item dropdown?

You can set the maximum height of a MenuItem's DropDown using the ToolStripMenuItem.DropDown MaximumSize property.

You can determine the height of the DropDown based on the maximum number of Items you want to show. Or any other measure that makes sense in your scenario (maybe a measure that fits the current ClientSize.Height of a Form).

To specify a height relative to a maximum number of sub items (here, maxSubMenuItems), sum the Height of the first maxSubMenuItems sub items and use this measure to set the MaximumSize property.

The standard (top and bottom) scroll buttons will appear.

Here, I'm using a maxHeight + (maxHeight / maxSubMenuItems) value, to add some space, at the top and bottom of the dropdown, otherwise a menu may not fit in and it also looks better :)

Insert this code in the Form's Constructor (after InitializeComponent()) or in Form.Load:

int maxSubMenuItems = 6;

if (toolStripMenuItem1.DropDownItems.Count > maxSubMenuItems) {
int maxHeight = toolStripMenuItem1.DropDownItems
.OfType<ToolStripMenuItem>()
.Take(maxSubMenuItems)
.Sum(itm => itm.Height);

toolStripMenuItem1.DropDown.MaximumSize =
new Size(toolStripMenuItem1.DropDown.Width, maxHeight + (maxHeight / maxSubMenuItems));
}

► This can come in handy when you have to show a list of sub-items that represent Fonts, for example. So you may want to show a string drawn using the Font name in the list. Or similar situations, when you have to present a single, potentially long, dropdown.

In other cases, try to limit the number of items per ToolStripMenuItem using sub menus.

How to make Bootstrap dropdown's vertical scrollbar

Fixed this issue by using below code

.dropdown-menu { max-height: 280px; overflow-y: auto; min-width: 100% !important; background-attachment: local, local, scroll, scroll; }

.dropdown-item { white-space: normal; }


Related Topics



Leave a reply



Submit