Dropdown links behaving unpredictably

[Chuck_Braman]

I’m in the process of learning Webflow by recreating a website that I originally created in Adobe Muse. Here’s a representative page from that site: Paul Motian Interview and Discography by Chuck Braman

The same page (and site), so far, recreated with Webflow: http://cbproject.webflow.io/ideas/paul-motian-interview-method-of-a-master

I’m trying to recreate the entire “Ideas” section of the site using a Webflow CMS I created called “Ideas.” As there are a lot of different pages on the original site formatted a lot of different ways, I’m not sure whether this is the best and most logical way to do this or not (or even entirely possible), but I’m treating it as a challenge to learn the Webflow CMS capabilities. Wish me luck!

In any case, there are a couple odd issues so far that I can’t quite diagnose pertaining to using a Collection List within a Dropdown Component.

If, on the Webflow version of the site, you click on the “philosophy / politics / economics” dropdown, the first three links inside are within a collection list. The fourth link is not. The interesting behavior is that the “dropdown list” part of the component expands to exactly accommodate the size of the fourth link, and even further expands as the text in the link goes from normal-sized type to bold-sized type when you hover over it.

Compare this to the behavior of the dropdown labeled “music / drumming,” which currently only has one link, which is within a collection list. The totally different behavior here is that the “dropdown list” part of the component does not expand at all to accommodate the size of the link, either in its normal-sized type or bold-sized type. Oddly, it (1) breaks the link into two lines, while (2) leaving lots of unused empty space to the left of the text. This seems particularly odd to me, because I don’t have any size set for any of these divs and components; they are all “auto.”

Now, if you’re in the preview project you can simulate the same behavior in the “philosophy / politics / economics” dropdown by deleting the fourth link (the one that is outside of the Dropdown Component).

Does anyone have any idea why the link that is outside of the dropdown component causes the width of the “dropdown list” to behave in the way I would expect and desire (it expands and contracts with the size of the text), whereas the links within the collection list within the dropdown component do not?

---

Here is my site Read-Only: https://preview.webflow.com/preview/cbproject?preview=585fee97d40ef6f82149c2045e35bd41

[Waldo (Waldo Broodrÿk)]

Excellent question @Chuck_Braman!

You’re seeing this behavior because the dropdown on the left is getting it’s width from the longer name:
philosophy / politics / economics

Where as the other dropdown only has a label of: music / drumming

So it creates a shorter dropdown.

Currently the text does not automatically wrap in dropdown elements (unless nested inside of a parent class that overrides the style like a collection list). We have an open issue to resolve this.

If you add the following code to the before closing </head> of your site, it should cause the links to wrap in the dropdown:

<style>

.w-dropdown-link { white-space: inherit; }

</style> 

I’ll post here with an update once we offer controls for the white-space wrapping behavior in dropdown elements, as they are currently set to nowrap instead of inherit.

---

Update: Resolved

This issue has now been resolved with our new whitespace feature (thank you @forresto ):
https://webflow.com/feature/white-space-property-added-to-control-text-wrapping

[Chuck_Braman]

Thanks, @Waldo,

I actually don’t think that I made my question clear. What I’m trying to achieve is the opposite: I don’t want the Dropdown Links in the Dropdown List to wrap, and I want the width of the Dropdown Links to determine the width of the enclosing Dropdown List.

As I noted above, this seems to be the default behavior of Dropdown Links when they are not enclosed within a Collection List. But once the links are enclosed within a Collection List, the text within the Dropdown Links wraps rather than staying on one line and expanding the width of the enclosing Dropdown List.

I added the code you suggested before the closing tag, alternately with inherit and with nowrap, but in my experience, it didn’t alter the behavior of the text within Dropdown Links. It also seems, to my eyes, that the width of the Dropdown List is wider than the text in the Dropdown Toggle in both instances, so, to my eyes, the width of the Dropdown List doesn’t seem to be determined by the width of the text in the Dropdown Toggle, unless I’m misunderstanding something… could you look into this again?

Thanks.

[Waldo (Waldo Broodrÿk)]

Hi @Chuck_Braman thank you so much for the follow up and for clarifying!

Excellent question! You can simply set a min-width on the dropdown list while it is in the open state to prevent text from wrapping:

You’ll find that min-width and min-height properties come in handy when you are trying to keep elements a certain width or height to prevent odd wrapping or overflow behavior.

Please let me know if this is helpful or if you have any additional questions.

I’m happy to help further!

[Chuck_Braman]

Thank you, @Waldo, for your patience and your help.

It’s still odd to me that the Collection List causes the links to wrap within the Dropdown List—it would be nice if Dropdown List expanded to the width of the Dropdown Links within a Collection List as it does with Dropdown Links outside of a Collection List—but this is a good work-around, and now I can move on.