# Why are tabs wrapping? **URL:** \ **Category:** Ask us anything\ **Created:** [June 6, 2023, 3:21pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967 "2023-06-06T15:21:42Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\ **Post date:** [June 6, 2023, 3:21pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/1 "2023-06-06T15:21:42Z")
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? ![Screen Shot 2023-06-06 at 11.04.56 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4f95762278c1de0eaca6bfa53425a54524fb9134.jpeg) ![Screen Shot 2023-06-06 at 11.18.17 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9c34e808d5c94663f026efae9c754471839d9191.png) ---
**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\ **Post date:** [June 7, 2023, 3:02am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/2 "2023-06-07T03:02:48Z")
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%. ---
**Author:** ![yunus](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/yunus/32/3122_2.png) [@yunus](https://community.weweb.io/u/yunus)\ **Post date:** [June 7, 2023, 7:15am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/3 "2023-06-07T07:15:32Z")
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. ---
**Author:** ![Quentin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/quentin/32/6_2.png) [@Quentin](https://community.weweb.io/u/Quentin)\ **Post date:** [June 7, 2023, 9:24am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/4 "2023-06-07T09:24:07Z")
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 💪 ---
**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\ **Post date:** [June 7, 2023, 9:32am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/5 "2023-06-07T09:32:22Z")
@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. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/47999f57cd71c7db764942ae32a01fa46cecb495.jpeg) ---
**Author:** ![yunus](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/yunus/32/3122_2.png) [@yunus](https://community.weweb.io/u/yunus)\ **Post date:** [June 7, 2023, 10:21am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/6 "2023-06-07T10:21:57Z")
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** ![Screenshot 2023-06-07 at 11.20.48](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/662825e9c819ea8928fffc47cae2a038762aaf3c.png) **Structure** ![Screenshot 2023-06-07 at 11.20.39](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5ba7112eb3ddfb72d8ba0cb2f9f41c26bf975878.png) ---
**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\ **Post date:** [June 7, 2023, 1:27pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/7 "2023-06-07T13:27:04Z")
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. ---
**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\ **Post date:** [June 7, 2023, 1:28pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/8 "2023-06-07T13:28:24Z")
do you mean select each header text individually and wrap in a Div, or select all tabs together and wrap those in a Div? ---
**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\ **Post date:** [June 7, 2023, 1:36pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/9 "2023-06-07T13:36:48Z")
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? ---
**Author:** ![yunus](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/yunus/32/3122_2.png) [@yunus](https://community.weweb.io/u/yunus)\ **Post date:** [June 7, 2023, 2:08pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/10 "2023-06-07T14:08:07Z")
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. ![Screenshot 2023-06-07 at 15.04.59](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/427f8dbb9fee6e813c17a590d7d9a86eed43aa98.png) ---
**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\ **Post date:** [June 7, 2023, 11:39pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/11 "2023-06-07T23:39:46Z")
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: ![Screen Shot 2023-06-07 at 7.39.15 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4d449406ce6a556d8aa53b3d4f4937b45cf1076c.jpeg) What am I doing wrong? ---
**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\ **Post date:** [August 1, 2023, 4:07am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/12 "2023-08-01T04:07:19Z")
I’m having a similar issue with tabs wrapping. Is it possible to target the .tabs-container and update it with something like this? ```auto .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. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b57387546bab80bc7a0b15dd8bf4b140e2c4802b.png) ---
**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\ **Post date:** [August 1, 2023, 5:12am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/13 "2023-08-01T05:12:15Z")
So, I resolved this by adding !important ```auto .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. ---
**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\ **Post date:** [August 1, 2023, 11:41am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/14 "2023-08-01T11:41:47Z")
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… ---
**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\ **Post date:** [August 1, 2023, 7:30pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/15 "2023-08-01T19:30:05Z")
Open DevTools and find the element name. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4631ff5c7a1d4d5ed1b73ffce01daed3de87e32b.png) And then insert the code in style tags into the Project custom code settings as follows; ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f38569ed3094a6c43f27158a1556278f66f6700d.png) PS. this is me just trying to make little hacks to move forward. I can’t guarantee the ongoing reliability of this method. ---
**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\ **Post date:** [August 2, 2023, 8:15am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/16 "2023-08-02T08:15:23Z")
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. ---
**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\ **Post date:** [August 2, 2023, 12:24pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/17 "2023-08-02T12:24:50Z")
Thanks for confirming @aurelie For the inexperienced like me, are you able to provide a clearer picture how we do it this way? > [@aurelie](#): > > use a custom one on the element, and use it as a css target. I’m cognizant of the fact that my trial and error approach only gets me so far. ---
**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\ **Post date:** [August 2, 2023, 12:39pm UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/18 "2023-08-02T12:39:28Z")
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. ---
**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\ **Post date:** [August 20, 2023, 2:06am UTC](https://community.weweb.io/t/why-are-tabs-wrapping/2967/19 "2023-08-20T02:06:57Z")
@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.