Always show vertical scrollbar in <select>
It will work in IE7. But here you need to fixed the size
less than the number of option
and not use overflow-y:scroll
. In your example you have 2 option
but you set size=10
, which will not work.
Suppose your select has 10 option
, then fixed size=9
.
Here, in your code reference you used height:100px
with size:2
. I remove the height
css, because its not necessary and change the size:5
and it works fine.
Here is your modified code from jsfiddle:
<select size="5" style="width:100px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
this will generate a larger select box than size:2
create.In case of small size
the select box will not display the scrollbar,you have to check with appropriate size
quantity.Without scrollbar it will work if click on the upper and lower icons of scrollbar.I show both example in your fiddle with size:2
and size
greater than 2
(e.g: 3,5).
Here is your desired result. I think this will help you:
CSS
.wrapper{
border: 1px dashed red;
height: 150px;
overflow-x: hidden;
overflow-y: scroll;
width: 150px;
}
.wrapper .selection{
width:150px;
border:1px solid #ccc
}
HTML
<div class="wrapper">
<select size="15" class="selection">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</div>
How to always show the vertical scrollbar in a browser?
jQuery shouldn't be required. You could try adding the CSS:
body {overflow-y:scroll;}
This works across the latest browsers, even IE6.
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>
Make Scroll Always Show In Material Select
The scroll is not showing because you are probably using the trackpad or a magic mouse. Using an external mouse will show the scrollbar just setting "overflow" to "auto" or "scroll".
If you want to show also the scrollbar using the trackpad or the magic mouse, you can still do it using the -webkit-scrollbar pseudo-element
In this post is also explained:
Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
In your particular case you could achieve this using these css lines:
::ng-deep .mat-select-panel::-webkit-scrollbar {
-webkit-appearance: none;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:vertical {
width: 11px;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:horizontal {
height: 11px;
}
::ng-deep .mat-select-panel::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
Hide vertical scrollbar in <select> element
This is where we appreciate all the power of CSS3:
.bloc { display: inline-block; vertical-align: top; overflow: hidden; border: solid grey 1px;}
.bloc select { padding: 10px; margin: -5px -20px -5px -5px;}
<div class="bloc"> <select name="year" size="5"> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012" SELECTED>2012</option> <option value="2013">2013</option> <option value="2014">2014</option> </select></div>
how to manage horizotal and vertical scrollbar in selectbox?
see this demo
You just need to remove overflow-y:hidden;overflow-x:scroll;
and set it to
overflow:auto; // show Scroll when Required`
OR
overflow:scroll; //if you want to show scroll always
Related Topics
CSS Hover Sometimes Doesn't Work on Svg Paths
Body { Overflow-X: Hidden; } Breaks Position: Sticky
Angular4 - Scrolling to Anchor
Change CSS Font-Family for Separate Options in Select Tag
Picture (Source) Element Vs Img Srcset Attribute
How to Make Text Vertically and Horizontally Center in an HTML Page
How to Put a Space Character Before Option Text in a HTML Select Element
How to Horizontally Center an Absolute Positioned Element Inside a 100% Width Div
CSS 100% Height, and Then Scroll Div Not Page
Send Form by Email and Track Responses in Spreadsheet
How to Correctly Use "Section" Tag in HTML5
Change Color of Text Responding to Background Color
"Break-Inside: Avoid-Column" Doesn't Work in Firefox
Does Svg Xmlns Attribute Value Requires Protocol? Can It Be Https or Relative
Ipad Layout Scales Up When Rotating from Portrait to Landscape