locked
Help I am stuck on tab panel width issue? RRS feed

  • Question

  • User743508062 posted

    Hi

    I have been looking at the problem for several hours and it is very frustrating because I cannot find the solution.

    The problem is that I have added another tab into the panel and the fifth tab is dropping of the end and is on top of tab1!

    I have been looking at how to modify the size of the panel but cannot seem to find the right setting to change!!

    my tabs code is:

    <div class="tabcontainer2" >
        <article class="tabs2">
    
            <span id="one" class="anchor"></span>
            <div class="panel">
                <a class="tab-link" href=@linkTransfer>Prices: Transfer </a>
            </div>
    
            <span id="two" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkList>Prices: List</a>
             </div> 
            
            <span id="three" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkNett>Prices: Nett</a>
             </div>   
    
            <span id="four" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkVendor>Vendor</a>
             </div>   
            
         <span id="five" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkCustomer>Customer</a>
             </div> 
    
         </article>
    </div>

    My css for the tab layout is:

    /*----------------Start tab settings----------*/
    
    .tabcontainer {
    	width: 100%;
    	max-width: 500px; /* this changes the width of each tab */
    	margin: 50px auto;
    	font: 90% arial;
        float: left;    
        margin-top: -50px;    
        margin-left: 440px
    }
    
    .tabcontainer2 {
    	width: 100%;
    	max-width: 500px; /* this changes the width of each tab */
    	margin: 50px auto;
    	font: 90% arial;
        float: left;    
        margin-top: -50px;    
        margin-left: 250px
    }
    
     article, header {
    	display: block;
    
    } 
    
    header h1, header p {
    	margin:0 auto;
    	;
    	font-family:Arial, Helvetica, sans-serif;
    	text-align:center;
    	margin-top: 10px;
    }
    
    
        header a {
    	text-decoration:none;
    }
    
    a:hover {
    	text-decoration:underline;
    }
        
       
        
    .tabs {
    	width: 100%;
    	max-width: 600px; /* this changes the width of each tab */
    	background: #a6dbed;
    	margin: 50px auto 0;
    	;
    
    }
    
    .tabs2 {
    	width: 100%;
    	max-width: 500px; /* this changes the width of each tab */
    	background: #a6dbed;
    	margin: 50px auto 0;
    	;
    
    }
    
    	span.anchor {
    		;
    		display: none;
    	}
    
    	.panel div {
    		opacity:0;
    		background: #d3dce0; /* changed this from #eee */
    		float: left;
    		width: 100%;
    
    		;
    		top: 10px; /* changed this from 19 */
    		left: 0;
    		padding: 5px; /* changed this from 10 */
    		box-sizing: border-box;
    		line-height: 1.5em;
    		border-radius: 5px;
    		border-top-left-radius: 0;
    		-webkit-transition: all 0.6s ease;
    		-moz-transition: all 0.6s ease;
    		-ms-transition: all 0.6s ease;
    		-o-transition: all 0.6s ease;
    		transition: all 0.6s ease;
    	}
    
    		.panel .tab-link {
    			margin-top: -20px;
    			float: left;
    			width: 20%;
    			padding: 8px; /* changed this from 10 - relates to height of tab */
    			background: #e2e2e2;
    			margin-right: .5%;
    			text-decoration: none;
    			box-sizing: border-box;
    			font-weight: bold;
    			font-size: 1.1em;
    			color: #333;
    			text-align: center;
    			border-top-left-radius: 5px;
    			border-top-right-radius: 5px;
    			-webkit-transition: all 0.6s ease;
    			-moz-transition: all 0.6s ease;
    			-ms-transition: all 0.6s ease;
    			-o-transition: all 0.6s ease;
    			transition: all 0.6s ease;
    		}
    
    			.panel .tab-link:visited {
    				color: #333;
    			}
    
    	.anchor:target + .panel div {
    		opacity: 1;
    		background: #ccc;
    	}
    
    		.anchor:target + .panel .tab-link {
    			background: #ccc;
    		}
    
    @media screen and (max-width:00px) {
    
    	.panel .tab-link {
    		font-size: 0.8em;
    		padding: 12px 10px 12px 10px;
    	}
        
    
    
    }

    Please help!

    Thank you.

    Tuesday, July 30, 2013 11:52 AM

Answers

  • User-183374066 posted

    Try

    increase width of .tabcontainer2 and .tabcontainer to 800
    increase width of .tabs and .tabs2 to 900px
    reduce width of ".panel .tab-link" to 16%

    See code below

    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
         
        </script>
        <style type="text/css">
            .tabcontainer {
    	width: 100%;
    	max-width: 800px; /* this changes the width of each tab */
    	margin: 50px auto;
    	font: 90% arial;
        float: left;    
        margin-top: -50px;    
        margin-left: 440px
    }
    
    .tabcontainer2 {
    	width: 100%;
    	max-width: 800px; /* this changes the width of each tab */
    	margin: 50px auto;
    	font: 90% arial;
        float: left;    
        margin-top: -50px;    
        margin-left: 250px
    }
    
     article, header {
    	display: block;
    
    } 
    
    header h1, header p {
    	margin:0 auto;
    	;
    	font-family:Arial, Helvetica, sans-serif;
    	text-align:center;
    	margin-top: 10px;
    }
    
    
        header a {
    	text-decoration:none;
    }
    
    a:hover {
    	text-decoration:underline;
    }
        
       
        
    .tabs {
    	width: 100%;
    	max-width: 900px; /* this changes the width of each tab */
    	background: #a6dbed;
    	margin: 50px auto 0;
    	;
    
    }
    
    .tabs2 {
    	width: 100%;
    	max-width: 900px; /* this changes the width of each tab */
    	background: #a6dbed;
    	margin: 50px auto 0;
    	;
    
    }
    
    	span.anchor {
    		;
    		display: none;
    	}
    
    	.panel div {
    		opacity:0;
    		background: #d3dce0; /* changed this from #eee */
    		float: left;
    		width: 100%;
    
    		;
    		top: 10px; /* changed this from 19 */
    		left: 0;
    		padding: 5px; /* changed this from 10 */
    		box-sizing: border-box;
    		line-height: 1.5em;
    		border-radius: 5px;
    		border-top-left-radius: 0;
    		-webkit-transition: all 0.6s ease;
    		-moz-transition: all 0.6s ease;
    		-ms-transition: all 0.6s ease;
    		-o-transition: all 0.6s ease;
    		transition: all 0.6s ease;
    	}
    
    		.panel .tab-link {
    			margin-top: -20px;
    			float: left;
    			width: 16%;
    			padding: 8px; /* changed this from 10 - relates to height of tab */
    			background: #e2e2e2;
    			margin-right: .5%;
    			text-decoration: none;
    			box-sizing: border-box;
    			font-weight: bold;
    			font-size: 1.1em;
    			color: #333;
    			text-align: center;
    			border-top-left-radius: 5px;
    			border-top-right-radius: 5px;
    			-webkit-transition: all 0.6s ease;
    			-moz-transition: all 0.6s ease;
    			-ms-transition: all 0.6s ease;
    			-o-transition: all 0.6s ease;
    			transition: all 0.6s ease;
    		}
    
    			.panel .tab-link:visited {
    				color: #333;
    			}
    
    	.anchor:target + .panel div {
    		opacity: 1;
    		background: #ccc;
    	}
    
    		.anchor:target + .panel .tab-link {
    			background: #ccc;
    		}
    
    @media screen and (max-width:00px) {
    
    	.panel .tab-link {
    		font-size: 0.8em;
    		padding: 12px 10px 12px 10px;
    	}
        
    
    
    }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="server" ID="sm1">
        </ajaxToolkit:ToolkitScriptManager>
        <div class="tabcontainer2" >
        <article class="tabs2">
    
            <span id="one" class="anchor"></span>
            <div class="panel">
                <a class="tab-link" href=@linkTransfer>Prices: Transfer </a>
            </div>
    
            <span id="two" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkList>Prices: List</a>
             </div>
            
            <span id="three" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkNett>Prices: Nett</a>
             </div>
    
            <span id="four" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkVendor>Vendor</a>
             </div>
            
         <span id="five" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkCustomer>Customer</a>
             </div>
    
         </article>
    </div>
        </form>
    </body>
    </html>
    

    Output:



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 30, 2013 1:09 PM

All replies

  • User-183374066 posted

    Try

    increase width of .tabcontainer2 and .tabcontainer to 800
    increase width of .tabs and .tabs2 to 900px
    reduce width of ".panel .tab-link" to 16%

    See code below

    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
         
        </script>
        <style type="text/css">
            .tabcontainer {
    	width: 100%;
    	max-width: 800px; /* this changes the width of each tab */
    	margin: 50px auto;
    	font: 90% arial;
        float: left;    
        margin-top: -50px;    
        margin-left: 440px
    }
    
    .tabcontainer2 {
    	width: 100%;
    	max-width: 800px; /* this changes the width of each tab */
    	margin: 50px auto;
    	font: 90% arial;
        float: left;    
        margin-top: -50px;    
        margin-left: 250px
    }
    
     article, header {
    	display: block;
    
    } 
    
    header h1, header p {
    	margin:0 auto;
    	;
    	font-family:Arial, Helvetica, sans-serif;
    	text-align:center;
    	margin-top: 10px;
    }
    
    
        header a {
    	text-decoration:none;
    }
    
    a:hover {
    	text-decoration:underline;
    }
        
       
        
    .tabs {
    	width: 100%;
    	max-width: 900px; /* this changes the width of each tab */
    	background: #a6dbed;
    	margin: 50px auto 0;
    	;
    
    }
    
    .tabs2 {
    	width: 100%;
    	max-width: 900px; /* this changes the width of each tab */
    	background: #a6dbed;
    	margin: 50px auto 0;
    	;
    
    }
    
    	span.anchor {
    		;
    		display: none;
    	}
    
    	.panel div {
    		opacity:0;
    		background: #d3dce0; /* changed this from #eee */
    		float: left;
    		width: 100%;
    
    		;
    		top: 10px; /* changed this from 19 */
    		left: 0;
    		padding: 5px; /* changed this from 10 */
    		box-sizing: border-box;
    		line-height: 1.5em;
    		border-radius: 5px;
    		border-top-left-radius: 0;
    		-webkit-transition: all 0.6s ease;
    		-moz-transition: all 0.6s ease;
    		-ms-transition: all 0.6s ease;
    		-o-transition: all 0.6s ease;
    		transition: all 0.6s ease;
    	}
    
    		.panel .tab-link {
    			margin-top: -20px;
    			float: left;
    			width: 16%;
    			padding: 8px; /* changed this from 10 - relates to height of tab */
    			background: #e2e2e2;
    			margin-right: .5%;
    			text-decoration: none;
    			box-sizing: border-box;
    			font-weight: bold;
    			font-size: 1.1em;
    			color: #333;
    			text-align: center;
    			border-top-left-radius: 5px;
    			border-top-right-radius: 5px;
    			-webkit-transition: all 0.6s ease;
    			-moz-transition: all 0.6s ease;
    			-ms-transition: all 0.6s ease;
    			-o-transition: all 0.6s ease;
    			transition: all 0.6s ease;
    		}
    
    			.panel .tab-link:visited {
    				color: #333;
    			}
    
    	.anchor:target + .panel div {
    		opacity: 1;
    		background: #ccc;
    	}
    
    		.anchor:target + .panel .tab-link {
    			background: #ccc;
    		}
    
    @media screen and (max-width:00px) {
    
    	.panel .tab-link {
    		font-size: 0.8em;
    		padding: 12px 10px 12px 10px;
    	}
        
    
    
    }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="server" ID="sm1">
        </ajaxToolkit:ToolkitScriptManager>
        <div class="tabcontainer2" >
        <article class="tabs2">
    
            <span id="one" class="anchor"></span>
            <div class="panel">
                <a class="tab-link" href=@linkTransfer>Prices: Transfer </a>
            </div>
    
            <span id="two" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkList>Prices: List</a>
             </div>
            
            <span id="three" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkNett>Prices: Nett</a>
             </div>
    
            <span id="four" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkVendor>Vendor</a>
             </div>
            
         <span id="five" class="anchor"></span>
            <div class="panel">
                    <a class="tab-link" href=@linkCustomer>Customer</a>
             </div>
    
         </article>
    </div>
        </form>
    </body>
    </html>
    

    Output:



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 30, 2013 1:09 PM
  • User743508062 posted

    Nasser, thanks for the help, that worked!!, I would never have figured that by myself. Brilliant.

    Wednesday, July 31, 2013 4:49 AM