Not rendering selectBoxIt correctly when in div with display:none

[jnorrisdesign]

I have a element in a div that is initially hidden (via display:none) when the page loads. When a user clicks a link that div is changed to display its content (including the element).

The width of the selectBoxIt element doesn't appear to be figured correctly.

Here is a jFiddle showing the issue.
http://jsfiddle.net/dJzhV/1/

Thanks for the help and the great plugin.

[yanickrochon]

To solve this problem, the element can be wrapped inside a temporary DIV that would be absolute positionned, and set with a left offset of -9999999px (or something). Then, shown, compute it's size, hidden again, then unwrapped to restore it's original layout.

[gfranko]

I appreciate you creating a jsfiddle, it really helped. The problem is that jQuery cannot detect the proper width dimensions when an element display property is set to none. If the element used the visible property instead then it would work. Here are two possible solutions:

1. When you make the SelectBoxIt drop down visible, call the SelectBoxIt refresh() method to rebuild the drop down. Since the element will now be visible, the dimensions logic will work correctly. You can see it working here
2. Use a static width instead of relying on SelectBoxIt's dynamic auto width. You can see it working here

[gfranko]

@yanickrochon That solution will also work since the element dimensions will be able to be computed since it will be within the DOM.

[gfranko]

UPDATE: SelectBoxIt v3.4.0 has fixed this issue, so you do not have to implement any of the above solutions.

[morphanite]

I am having the following issue on chrome for android.

For initially hidden elements, the select box's width is correct, but the clickable area on android is still shrunk. On the desktop version of android everything is working fine.

If I run $("select").selectBoxIt(); after the elements are visible, everything works great.

Any hints on how to fix?

[gfranko]

@morphanite Could you update your code to the latest JS and CSS in the dev branch and then let me know if it fixes it? https://github.com/gfranko/jquery.selectBoxIt.js/tree/dev/src

[morphanite]

@gfranko Thanks, it works now.

[bergonom]

Anyone else still having issues with this? I am using v3.5.0 and I still have to make sure my elements are visible when applying selectBoxIt. It feels pretty hacky to be putting things off screen to enable them, or refreshing them once they've become visible.

[gfranko]

@bergonom This should be fixed in the latest version.

[sitoagency]

I had a similar issue inside a hidden div using flexbox, and it was caused by max-height: 0px applied to:
.selectboxit-container .selectboxit-options
So then i just forced
.selectboxit-container .selectboxit-options { max-height: none !important; } via CSS and it's working fine.