Select options appear outside the window

Question

options are outside the window

Is it possible to hide select options inside the window? IE, FF, Chrome behave the same way

overflow:hidden doesn't work.

Why is this an issue to you? It would be counter-intuitive to restrict the size of the popup window when you potentially have plenty of space to display it outside of the browser window. — Lâm Tran Duy, Apr 16 '13 at 14:52
In fact I like the way browsers deal with this. But few days ago I faced with the problem our QA doesn't like :) — Tomy, Apr 16 '13 at 15:02

Manish Mishra · Answer 1 · 2013-04-16T15:22:35.737

2

I don't think there is much you can do about it.

either, you can increase the width of your dropdown according to the longest option

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

something like

$('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 select, using divs :)

probably use third party stylish dropdowns.

see this fiddle, an ugly 5mins implementation of such a dropdown by me i.e

create a markup like this:

<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 beautify it by css and jquery

edited Apr 16 '13 at 15:22

answered Apr 16 '13 at 15:05

Manish Mishra

12,163
5
35
59

Thumb up for your implementation :) but still the question is how to fix default select. Now about first part of your answer... No way because select has static width and option width will be the same even with clipped text – Tomy Apr 16 '13 at 15:30
`option width will be the same`. why so? see @TarasTomishch, idea is to clip that amount of text only, which would make the options within the width limit of select. – Manish Mishra Apr 16 '13 at 15:44
When window is zoomed a part of select hides inside it. But as you click on it, options appear outside full-width (similar to select one) – Tomy Apr 16 '13 at 16:06
This is some kind of bug, possibly with the operating system itself. I'm seeing drop down lists for Chrome render outside the window, which is fine, but they're extending outside of and being clipped by the edges of the desktop, which simply should not happen. It's making the vertical scroll bars inaccessible because they're off the screen. – Triynko Nov 19 '18 at 17:47

score 0 · Answer 2 · answered Apr 16 '13 at 15:01

I don't think you can use css to prevent it from going outside the browser window like that. (I am not positive).

However, you can use jquery ui autocomplete or something similar that styles the select options as a div and then it will stay within the window.

Select options appear outside the window

2 Answers2