Dropdown extends beyond viewable window

[rwkiii]

I have a SelectBoxIt control that extends below the viewable area of the browser. I've set the data-size attribute of the control and that works, but for some reason I have to scroll the window to see the dropdown list. The dropdown should display above the control instead of below it.

I have an idea why this is happening, though it's just a theory. The control is instantiated without any options initially. Its options are dependent on another SelectBoxIt control in the same form. The problematic SelectBoxIt control is populated dynamically with as many as 50-60 options. Perhaps the window size/position and SelectBoxIt size is determined on instantiation of SelectBoxIt and somehow I need to call one of the SelectBoxIt methods to make it aware of its new size after it has been dynamically populated? I execute the following after it has been populated:

        selectBox.data("selectBox-selectBoxIt").refresh();

But this doesn't seem to be all that's needed?

Thanks.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/8313118-dropdown-extends-beyond-viewable-window?utm_campaign=plugin&utm_content=tracker%2F23157&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F23157&utm_medium=issues&utm_source=github).

[rwkiii]

A piece of information in my question wasn't quite complete. I stated that I execute the following after dynamically populating the SelectBoxIt control:

selectBox.data("selectBox-selectBoxIt").refresh();

That code is not complete. I left out the part of my code that creates the selectBox variable:

var selectBox = $("select#myDropdown"); selectBox.data("selectBox-selectBoxIt").refresh();

Still, I do have the issue with the dropdown list extending below the browser window and being unreadable.

[gfranko]

It looks like this is a SelectBoxIt bug when using the data-size attribute. I will make sure to fix this in the next release, but for the time being, you can stop using the data-size attribute and instead use this CSS rule:

#ddStateProvinceSelectBoxItOptions {
  max-height: 150px;
}

[rwkiii]

Thank you for this workaround. It works!

As you know, my form is within an iframe. SelectBoxIt will 'drop' up if the list exceeds the bottom of the iframe, but it doesn't seem to regard the page boundaries in this situation. So in other words, if the iframe extends below the browser window and SelectBoxIt is close to the bottom, so long as there is available space in the iframe it will drop downwards despite it not being visible in the browser window.

Regardless, your workaround makes it all better. Thanks Greg.