Unable to make text wrap inside the Dropdown toggle

Design help Layout & Design
1

This useful Webflow University video: Create a Custom Accordion – Webflow tutorial - YouTube (strangely unlisted by Webflow for some reason I don’t understand) explains how to adapt the Dropdown component to create a custom accordion, which is useful for creating an FAQ. Unfortunately, it seems impossible for me to get the text in the Questions to respond fluidly when the viewport is resized and the single line needs to break into two lines to avoid spilling past the margin. I don’t know if this is caused by some intrinsic behavior built into the Dropdown component, or a gap in my understanding of CSS. If it’s the former, it would be a shame, because it would make the component unusable for creating an FAQ.

I’ve made a 3-minute video that demonstrates the issue here: Loom | Free Screen & Video Recording Software | Loom

My site Read-Only link is: https://preview.webflow.com/preview/nyjb?utm_medium=preview_link&utm_source=designer&utm_content=nyjb&preview=ea34186c112ddd00fd9db345adbd7339&workflow=preview

To find the Dropdown component, you’ll need to scroll down past the picture of the vibraphone.

If anyone has any idea what the cause of this issue is and can offer a solution, I’d really appreciate it. I’m at an impasse.

2

Hi @Chuck_Braman thanks for the post.

Here is a post that should help, you will probably need to use a little custom css when working with text in the Dropdown toggle which is a pre-scripted/styled element.

As to why the video has been unlisted, I am not sure, but I will help to find out and provide some feedback once I have an answer.

Let me know if trouble with the custom workaround for the text wrap.

1 Like
3

Thank you very much, @cyberdave, for responding so quickly and helping out.

Unfortunately, while the solution does cause the line to break, the line breaking creates its own set of problems due to the construction of the FAQ using the dropdown component.

I’ve made a video demonstrating what happens: Loom | Free Screen & Video Recording Software | Loom

If you can think of a solution to the new issues the line break creates, please let me know. However, I suspect that there probably isn’t a practical way to implement an FAQ using the dropdown component at this time. What do you think?

4

Hi @Chuck_Braman, here is another way to turn the dropdown into an accordion where the Dropdown list is the item that is set to overflow hidden, which allows you to use auto height on the dropdown toggle.

You can enable Breaking set to Normal as an override on the Dropdown toggle typography which should wrap the text in Typography options.

Looking at the Accordion structure, I would suggest the following changes to each element below:

  1. Accordion Item

Remove the overflow hidden

  1. Accordion Toggle

Remove Display block override and set to 100% width

Style the Breaking in typography options to Normal

  1. Dropdown list

Remove Display Block, Set overflow to hidden and Set position to relative.

  1. Advice answer

Remove 30px bottom margin

  1. Advise question

Set width to 100%

Next, there are some things to check when the menu is in the Open state

While the menu is open, select the Accordion Toggle.

Set the Accordion toggle in Open state to Display block

Now that those styles have been set on Desktop, you will. Need to make sure that there are no other style overrides to those values on lower viewports.

Next thing to do is to update the interaction a bit to target the Dropdown list instead of the Accordion Item.

Open the “Dropdown opens” interaction and change the target of the accordion item to the dropdown list

Change initial state of Dropdown list to 0px

Save Interaction and then open Accordion Close interaction

Change Interaction to change target of first item to Dropdown list and set height in interaction step to 0px

After making these changes to the first Accordion item, test that and do the same for other accordion items, or just duplicate the first item and replace the texts etc.

Here is a result of how the accordion works for me after doing these kinds of changes:

Note you might need to adjust some other styles to center things a little more, I do not take an exaustive look at what style overrides you have on tablet, mobile landscape or mobile portrait that might need to be removed.

I hope this helps, let me know if you get stuck.

1 Like
5

@cyberdave, this is incredible, thank you!

I am actually stuck at the point in the instructions where you say:

Next, there are some things to check when the menu is in the Open state

While the menu is open, select the Accordion Toggle.

Set the Accordion toggle in Open state to Display block

I’m unclear as to what you’re referring to as the menu—would that be the accordion item? I’m also unclear as to what you mean by the “Open state” and what I would need to do to set the menu to that state.

Could you clarify this portion of your instructions for me? Thanks.

I’m very eager to see how this works out. If you’ve solved this issue, this would seem to be a major contribution to the Webflow community, and I would think your solution should become the basis of a new instructional video.

Thanks again for your patience with me and all the effort you’re putting into this.

1 Like
6

Hi @Chuck_Braman, thanks, I sent you a private message also, but I did want to share a quick simple example of how to style/setup the Dropdown as an accordion so that it accomodates the long text in the Dropdown Toggle and have that set to wrap:

https://webflow.com/website/Simple-Accordion-using-Dropdown-Element

I am checking the steps on this and will help to submit this to our education team to see if they can make a video for that, but I cannot give you a timeline for this.

You can clone the project above and then copy and paste to your own project.

2 Likes
7

@cyberdave, this is it! Thank you for solving what I thought was an unsolvable problem.

1 Like
8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.