Streaming live at 10am (PST)

Getting a container to conform to the width of its contents


#1

I would really like the width of the Dropdown List in this screenshot to wrap to the width of its contents, the Dropdown Links, but can’t figure out what settings would achieve this (if it’s possible).

Or put another way, I don’t understand what is causing the empty space to the right of them.

Note that I turned on X-Ray mode to make the problem more clear.

See:

Does anyone have any suggestions or insights they could share?


Here is my site Read-Only: https://preview.webflow.com/preview/cbproject2?preview=ca7ce9dda047e008b1fde15c5f2046d2

The page is “bands”


#2

Containers always fill the width based on the default media query styles. You can override these by putting a manual width in but I don’t recommend it. You can also play with the inner content and see if anything is set to have a full with on it as well.


#3

Thanks @DFink,

I’m not so technically literate, but should I interpret this to mean that there is some javascript invoked by the Dropdown List that is setting the width not based on the width of the text within but based on something else that I can’t alter and shouldn’t try to over-ride, and so I should just accept the extra space that is added as unavoidable?


#4

A parent element of the dropdown items has a fixed width.

If you pass its width to auto then it will shrink depending on its content


#5

Thanks @vincent,

That was a great catch and the one place it didn’t occur to me to look.

Oddly, though, when I removed fixed width of the Dropdown List from the settings of the Desktop breakpoint, while it had the expected effect on the behavior of the Dropdown List in the Desktop breakpoint, it had no effect on the behavior of the Dropdown List in the Mobile Portrait breakpoint. In the Mobile Portrait breakpoint the Dropdown List still has the extra space to the right of its contents.


#6

This one is trickier. Because this element is a part of a Webflow Component, it has a lot of pre-baked properties that don’t necessarily show up in the Style tab of Webflow Designer. For instance here the list element has various min-width defined depending on its state (open or not). It’s possible to add a min-width of zero, but for it to work the width can’t stay at auto value. So by adding a 100% width value (which does nothing because the list has position:absolute) along with a 0px min-width value, the element then shrinks back to the width of its content.


#7

Thanks @vincent,

In my case, when I apply those values, the element cuts off the content rather than shrinking to its width.

Please let me know if I did something wrong.

If not, I’m OK just accepting that there are some pre-baked properties causing the behavior that I can’t alter.


#8

@vincent,

I did just discover a workaround based on your suggestion. Thanks again.