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
Bootstrap Responsive Images Scaling
Set Size to Responsive Iframe in Bootstrap
Cumulative Layout Shift with Bootstrap 4 Grid
Svg Stroke-Dasharray Offset Not Consistent
Angular 6 Load CSS Folders in Angular.JSON
Intellij Idea 11: How to Compile .CSS from .Less
Replacing The Close Icon for a Jqueryui Dialog Box
Cache Busting Images Which Are Linked Inside SASS Files
Anchor Not to Top of Page, But 200Px Down
CSS Terminology: What Are These Called
Adding Hovertext on Kendoui Grid Column Headers