Streaming live at 10am (PST)

How to get text in a flexbox to wrap once the max width of the box has been reached?


#1

Hi everyone,

I'm working on my online portfolio/resume using Webflow. Having no previous coding experience, I'm really loving this application.

Currently, I'm in the phase where I'm just adding content to my page, positioning and testing for responsive display.
I've decided to show my resume as a dropdown where users can click a given job position to see a recommendation. In the dropdown toggle, I want to include company logo, position title, company name, time of position and, finally, the dropdown arrow icon.
the What's the issue for me is that on mobile display, I want the position title to break into i new line once the max width of it's flexbox div has been reached.


https://preview.webflow.com/preview/nielskoelmeyer?preview=3c652fac86841ab406bb844ee6d0edb9

I'm able to get the same effect on the cards section on the same page, but, for some reason, I'm not able to achieve it in the dropdown toggle. Any advice would be much appreciated!

Thanks!


Here is my public share link: https://preview.webflow.com/preview/nielskoelmeyer?preview=dd83968c7b48380bbda5ff842c9df5ae
(how to access public share link)


#2

Yes, I can continue to type in that div and the text will eventually go right across the page and out of screen!.

Have a feeling that it's because you have your text in the Toggle of the dropdown - seem to remember that these are set to stretch to contain the content - it's part of the Webflow Dropdown set-up (anyone know for sure?).

Perhaps a better way would be to use a Parent div to contain each listing, a title div for the title content and a show/hide div for the reference content.
Then use the Show and Hide tutorial here.
Set the click interaction on the title div to affect the show/hide div (don't forget to set the Parent div to Overflow None.
Also remember to check "Limit to sibling elements" otherwise all the listings will open.
Text breaks should work fine once you're out of the dropdown.

There will be an issue with closing the opened content - you can set up a 'second-click' on the interaction to close the panel.

Another way to go is to look up this discussion and StevenP's example - might be really helpful

Good Luck
Peter


#3

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