-
Posts
-
Good Morning!
It seems that when I use these tabs that I always have issues. This time is for a clients team page. Do you have a best use case when using thes e tabs? I have a row of 4 tabs on the top and then the screen shrinks a bit the active information in the tab goes below the other tabs that are not active. I was given css code and that is not bringing the Z index to the top. Can you please get me the css to bring the active tab code to the top. We are starting to use these quiet a bit and I want then to be perfect when they are active.Thanks so much!
~AmandaHey amanda-mdllc,
The tab content will always display below all tabs. If there’s a line break between the tabs because the width of the tabs exceeds the screen size the content of the active tab will be displayed below the last tab.
There’re two possible solutioons:
1) The easiest solution would be to split the tabs into several tab elements. Add just two tabs to each element/row. Then each row should display the tab content below the tabs. I’d recommend to simply duplicate the existing tab element, then delete tab 3 and 4 from the first element and tab 1 and 2 from the second element.
2) If you want to add 4 tabs to one element you can use this css code:
#top .main_color .tabcontainer .tab { max-width: 23%; }to resize the tabs. It will make sure all 4 tabs are displayed in one line
Best regards,
Dude
- You must be logged in to reply to this topic.