How do I force a dropdown accordion to wrap text to another line in the header?

Design help General
1

Hello! I’m building some accordions for FAQ’s using the dropdown widget. When the headline text is longer than the column that it’s in the text spills out of the column. How do I get it to wrap into a second line? I have tried placing the dropdown into a div with a margin and it still isn’t working. HELP!

2238×1652 387 KB

Here is my public share link: LINK
(how to access public share link)

2

Hey @Magada85 are you able to place line-breaks into the text manually for the dropdown text?

Could you please update your post with your read-only link so that we can help you faster :slight_smile:

How to share a read-only link:

Thanks in advance! :slight_smile:

3

Thanks, Waldo! Here’s the link: https://preview.webflow.com/preview/trizic-help-center?preview=cc9a118a0259da47c8b6005cacf6f286

I COULD do line breaks in the text, but I need the client to be able to adjust in the CMS as well as the fact that the breaks don’t follow through to the mobile versions of the site. I’d need to somehow make breaks different for the mobile versions. I have NO idea why it isn’t behaving right. It seems like a container div would make it wrap. Any thoughts?

4

Looks like what you need is

.w-dropdown-toggle {
  white-space: normal;
}

Dont think you can do this in the visual editor so will have to go in the custom css. Would also make it so its specific to this element so it does not effect other dropdowns.

.question-column .w-dropdown-toggle {
  white-space: normal;
}
2 Likes
5

Hey @Magada85 it looks like @andyjames solution works, though you will only see these changes on the published live site.

If you add in the following code to your page custom code Inside </head> tag area then the text wraps correctly on the published site:

<style>
.question-column .w-dropdown-toggle {
  white-space: normal;
}
</style>

Thank you very much for bringing this to our attention, I really appreciate it and am looking into this issue more. I’ll let you know as soon as I have more information.

1 Like
6

Hey @cyberdave this fixed the issue we had in this post: http://forum.webflow.com/t/forcing-of-menu-text-wrapping/22315

2 Likes
7

Fantastic! Thanks for your help. @Waldo, if you get any word on how to fix that in the editor view, I would be SO grateful. Thanks for all of your help!

2 Likes
8

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