Question

I’m on the process of making a dropdown widget. The menu the expands down is set to the same width as the parent (using jQuery).

The widget is working as expected, until however, you place it inside a DIV container with inital display set to none. When this container is shown, all the dropdown width’s according to jQuery are zero…
If the container is shown by default, all works.

Hopefully my fiddle will better illustrate what I mean: http://jsfiddle.net/ruFzR/
On the results pane; the top dropdown is outside of the container, the bottom inside it. Besides some obvious styling issues, the width is not expanding.

Answer 1

You can avoid the width issue caused by display: none; by using visibility: hidden; instead. Use visibility: visible; to make it visible.

The element stays within your content flow (same size, etc.) while it’s simply invisible.