Alex Guerin Alex Guerin - 1 year ago 78
CSS Question

CSS: no DIV width when display set to none

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:
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download