Jump to content

W3.CSS Vertical Tabs problem

Recommended Posts


I am on win 7, copied the Tryit example for Vertical Tabs  into my editor. I noticed these differences when I view it in my browsers ( I am using the pro version of the css so the colours do not show):

  • The example shows a border around the whole page - mine doesn't  - see W3.CSS Vtabs.png
  • Probably because it fills the full page and I can't tell if there is a border present

So I decided to add a W3.CSS Card to contain the Tab code within it:

<div class="w3-container">
		<div class="w3-card-4 w3-margin" style="width:95%;">
        	....code for tabs

It still does not show the border around the tabs and the corresponding tabbed content but the tab side bar is not contained in the card container and overflows above it. See enclosed sidebar.png screenshot.


The w3-sidebar class seems to be what is causing the problem so I removed from the declaration:

<div class=" w3-bar-block w3-yellow w3-card-2 w3-border w3-round-medium w3-margin" style="width:130px">

The Tabs are contained in the card container but the corresponding tab content is on longer aligned with the respective tab (without sidebar.png).

Thank you in advance for your help and assistance.



without sidebar.png

W3.CSS Vtabs.png

Edited by plox
remove items

Share this post

Link to post
Share on other sites

Image 2 is the closest to the last one (the example i presume?). 
The left div does not need any margin. Try adding: 
margin: 0;

And the right div would need:
vertical-align: top;

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now