A selection of options is displayed outside the window.

Question

Can I hide selection options inside a window? IE, FF, Chrome behave the same.

overflow: hidden does not work.

Answer 1

I don’t think you can handle it.

you can increase the width of the drop-down list according to the longest option

or you can copy the text of the longest option to make it small.

sort of

$('select option').each(function(a,b){ if(b.value.length > 10){ b.text= b.text.substring(0, 10)+ a+ '..'; } }); 

or you can create your own choice using divs :)

It is possible to use third-party stylish drop-down menus .

see this fiddle , an ugly implementation of five minutes of such a drop down list i.e.

create the markup as follows:

 <ul class="parent"> <li>---Select---</li> </ul> <ul class="option" > <li>this is a long option</li> <li>this is a even long option</li> <li>this is a very long option</li> <li>this is a very long option</li> <li>this is a very long option</li> <li>this is a very long option</li> </ul> 

and decorate it with css and jquery

Answer 2

I do not think you can use css so that it does not go beyond the browser window. (I'm not sure).

However, you can use jquery ui autocomplete or something similar that stylizes the selection options as a div and then it will remain in the window.