I have a screen with 7 tabs. They are designed to fit on 1 row, bit they are wrapping to a second row, and I can’t figure out why. The tab text is set to a fixed width to allow 7 of them to fit on one row on a 375px width screen. There is no horizontal padding or margins on the tab text. I’ve attached a screen capture showing the wrapping, and another to show my settings for the tab element itself. Any suggestions?
For each of the tab text, why don’t you try width (100/7)%? See if that works.
Otherwise what I actually did was that I created a whole new div on top of the tabs element and deleted all the tab headers. Then I built the tabs manually with (in this case 7 text elements) in the div. Each tab is set to 100/7%.
I wouldn’t recommend 7 tabs in row, quite tricky to navigate. But if you have to, you need to use fixed sizes like Raelyn suggested.
Weweb tabs structure is quite quirky, not that intuitive, or not following any common sense HTML logic. Totally custom to fit to their own brief. All tab headers are text objects, and you cannot really put them into containers or anything. Hence Text objects cannot be Flex objects, to self adapt to the width you got there… You need to use traditional block level sizing either exact widths or percentages.
Hey people 
We’re definitely aware that our components are showing limits, that’s why we work on the new reusable components that you’ll be able to build and share, while abstracting the complexity for end users.
Some of our components date back from a time were some of our users weren’t used to HTML/CSS standards. Now that’s not the case anymore.
That’s a big subject on our side, but it should be addresses by the end of the year 
@yunus its possible to set a flexbox as a tab.
You need to delete the text, and then you will have a dropzone when you can drag whatever you want, including a DIV.
As a shortcut, you can also select your header text, and press CTRL (or CMD) + G to create a wrapper around it.
Because people most of the time need only a text, the UI Kit contains a simple version, but the component can handle more possibilities.
Like i said, quirky. Not logical.
But thanks, good to know, will update my tabs which you can see below how I hacked the structure…
How it looks
Structure
I would generally agree about not having 7 tabs. These are not navigation tabs per se, they are all part of the “Stats” page, and all 7 tabs have a list of players and their ranking relative to 1 particular stat category. So each tab represents a different metric, and the tabs allow an easy way to see the rankings by desired metric.
do you mean select each header text individually and wrap in a Div, or select all tabs together and wrap those in a Div?
OK, I wrapped each tab text in a DiV as suggested, and the tabs are still wrapping on phone size. What should my horizontal size settings be on the Divs and the texts to make them stay on 1 row?
Text fit to their parent div width… Divs need to be Flex and all of them as below to equally share the available spacing… depending on their content. some can be bigger than others if the content width is different…
To lock that and make it equal, you can give fix values to text objects but that is not any different than making all divs fixed width.
Hmm. @yunus @aurelie When I have the tabs flexbox selected, I don’t see the size controls that @yunus posted. I see those if I select the text element within the flexbox, but not when the flexbox is selected. Here’s my setup when I have a flexbox selected:
What am I doing wrong?
I’m having a similar issue with tabs wrapping.
Is it possible to target the .tabs-container and update it with something like this?
.tabs-object .tabs-container[data-v-1464547b] {
flex-wrap: nowrap;
overflow-x: auto;
}
I’ve had a few attempts (trial and error) to insert this into the element custom css, and the project custom code, but the default ‘flex-wrap: wrap;’ doesn’t change.
So, I resolved this by adding !important
.tabs-object .tabs-container[data-v-1464547b] {
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
Somebody can probably educate me as to whether you shouldn’t do this, but it works for now.
Thanks Michael. I’m hoping this can work for me too. Where exactly would I put this code in Weweb? I don’t know JS and I’m a noob at Weweb…
Open DevTools and find the element name.
And then insert the code in style tags into the Project custom code settings as follows;
PS. this is me just trying to make little hacks to move forward. I can’t guarantee the ongoing reliability of this method.
Please be aware that the data attributes is changed on build, and so is not reliable.
Best approach is to use a custom one on the element, and use it as a css target.
Thanks for confirming @aurelie
For the inexperienced like me, are you able to provide a clearer picture how we do it this way?
I’m cognizant of the fact that my trial and error approach only gets me so far.
Assign a class or id to the element in the editor usogn the sidepanel options. Then using the dev tools create your selector starting from the custom class/id. This way you do not depend on variable data attributes.
2 Likes
@Quentin Have you considered fixing the tab element so that this kind of custom code work-around is not necessary? I have 7 tabs that fit on one row on a 375 px screen. They should NOT be wrapping but they are. Why is this happening? I can’t see anything in my settings that would be causing the tabs to wrap ay that screen size.