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>
HTML Select tag show vertical scroll with 10 option
apply a size="10"
to your select.
something like:
<select size="10">
// all your options
</select>
You have to put some style to the label like border, background-image etc.
Something like this to be done:
<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options' size="10" style='display:none;'>
// all the options
</select>
then use this jQuery code:
$('#choose').click(function(){
$(this).siblings('select').toggle();
});
Demo @ Fiddle
Try with this:
$('#choose').click(function (e) {
e.stopPropagation();
$(this).siblings('select').css('width', $(this).outerWidth(true)).toggle();
});
$('#options').change(function (e) {
e.stopPropagation();
var val = this.value || 'Select options';
$(this).siblings('#choose').text(val);
$(this).hide();
});
As you commented:
when size is greater then 1 of select tag, its not showing blue background in hover, when i add background through css option:hover, its working in FF, but not in chrome and safari.
so you can mockup with this:
$('#options').find('option').on({
mouseover: function () {
$('.hover').removeClass('hover');
$(this).addClass('hover');
},
mouseleave: function () {
$(this).removeClass('hover');
}
});
Demo with hover class.
html - how to scroll vertical in select box
overflow-x and overflow-y
The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):
overflow-x
specifies what to do with the left/right edges of the content.
overflow-y
specifies what to do with the top/bottom edges of the content.
select{overflow-x:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<select size="12" class="form-control"> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option> <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option></select>
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 scroll div vertical scroll bar on the basis of select box select item?
This code work for me.
jQuery(document).ready(function($)
{
$('#selectbox').change(function()
{
var divscrollvalue = ( parseInt(this.selectedIndex))*17;
$('#scrolldiv').scrollTop(divscrollvalue );
});
});
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>
Related Topics
Disable Certain Dates from Html5 Datepicker
How to Detect When Cancel Is Clicked on File Input
Print Header/Footer on All Pages (Print Mode)
Add Line Break Within Tooltips
How to Lock Viewport to Portrait Orientation in Html5/Css3
How to Stop Background from Jumping to the Top on Modal Toggle
Does Id Have to Be Unique in the Whole Page
How to Align 3 Divs (Left/Center/Right) Inside Another Div
Fill Svg Path Element With a Background-Image
How to Disable Viewport Zooming on Mobile Safari
Make Content Horizontally Scroll Inside a Div
How to Split the Screen into 3 Panels and Treat Each Panel Separately
Css Height 100% Is Not Always Equal to the Direct Parent
How to Get an Iframe to Be Responsive in iOS Safari
Align the Radio Buttons on the Center Whatever the Text Length