I'm trying to adjust Bootstrap tabs to make them span the full width of their container. Here's my code (a minimal working example):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Full Width Tabs using Bootstrap</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style>
.full-width-tabs > ul.nav.nav-tabs {
display: table;
width: 100%;
table-layout: fixed; /* To make all "columns" equal width regardless of content */
}
.full-width-tabs > ul.nav.nav-tabs > li {
float: none;
display: table-cell;
}
.full-width-tabs > ul.nav.nav-tabs > li > a {
text-align: center;
}
</style>
</head>
<body>
<div class="tabbable full-width-tabs">
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-one">
I'm in Tab 1.
</div>
<div class="tab-pane" id="tab-two">
Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2.
</div>
</div>
</div> <!-- /tabbable -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I get this (undesired) result:
However, I want the tab "headers" to span the entire width of the tab container - and distribute their individual width's evenly, something like this desired result:
How do I achieve that?
Update 1: Here's a JSFiddle: http://jsfiddle.net/agib/FZy4n/
Update 2: I already had a working widget using custom javascript. However, I'm looking for a solution that integrates seemlessly with Bootstrap and thus relies only on standard Bootstrap javascript.
Update 3: If I remove / comment out
/* table-layout: fixed; */
header widths are taking up all horizontal space as needed. However, their widths are resulting from the length of the header texts and thus not distributed evenly.
This is not what I want either:
Update 4: The upcoming Bootstrap 3 appears to have full-width tabs as a standard component using the class .nav-justified: Bootstrap 3 -> Navs -> Justified nav
Twitter Bootstrap 3 contains a class for this, the nav-justified class.
Use it like so:
<ul class="nav nav-tabs nav-justified">
<li>Foo</li>
<li>Bar</li>
</ul>
Maybe I've found your solution:
Create that class with css:
.take-all-space-you-can{
width:100%;
}
And then apply that class to your li tags into your ul. Doing these all the li takes the space that they can and automatically divide the space in the single row.
DEMO
You can use javascript and jquery.
Building on Nick Bull's answer above, you can dynamically determine the number of tabs on the page using Jquery.
Try this on your html page.
<script type="text/javascript">
$(document).ready(function() {
var numTabs = $('.nav-tabs').find('li').length;
var tabWidth = 100 / numTabs;
var tabPercent = tabWidth + "%";
$('.nav-tabs li').width(tabPercent);
});
</script>
Bootstrap 4
It's now very simple to get full-width Tabs using the nav-fill class. This works on all modern browsers including IE 11.
To get full width tabs, use (sized by tab content):
<ul id="myTabs" class="nav nav-tabs nav-fill">
<li class="nav-item">Home</li>
<li class="nav-item">Profile</li>
<li class="nav-item">Messages</li>
</ul>
Demo
To get full equal width tabs, use nav-justified:
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">...</li>
</ul>
Try
.nav-tabs > li {
float:none;
display: table-cell;
width: 1%;
}
Simple:
.nav-tabs > li {
/* width = (100 / number of tabs). This example assumes 3 tabs. */
width:33.33333%;
}
Hope that helps!
Try this solution, just one line of code to achieve that.
.full-width-tabs > ul > li { width: 100%; }
It will make the tabs to span full width of their container.
Look at jsfiddle : http://jsfiddle.net/BhGKf/
Try this, for all '.nav-pills' and each 'li' element inside with double loop.
function(){
$('.nav.nav-tabs').each(function(){
var liGroup = $(this).children('li');
var liLength= liGroup.length;
liGroup.each(function(){
var liWidth = 100/liLength-1;
$(this).css({'min-width': liWidth+'%','margin-left':'0px','margin-right':'0px'});
});
});}
DEMO http://jsfiddle.net/
<style>
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
flex: auto;
}
.nav-tabs .nav-link {
flex: auto;
}
</style>
This is what i was looking for.
Related
I have this menu bar, which is replaced by Images.
All looks good on normal view, but when I swtich to mobile view
It looks so clumsy. I tried Padding, But the individual cell do not
make up space with each other.
Here is the screenshot
li.topmenu1 {
height: 20px;
}
<nav id="category" class="drawer_block pc">
<ul class="category-nav">
<li class="topmenu1">
<img src="http://azlily.bex.jp/eccube_1/html/template/default/img/menu/home.png">
</li>
<li class="topmenu2">
<img src="/eccube_1/html/template/default/img/menu/products.png">
</li>
<li class="topmenu3">
<img src="/eccube_1/html/template/default/img/menu/about.png">
</li>
<li class="topmenu4">
<img src="/eccube_1/html/template/default/img/menu/howtouse.png">
</li>
<li class="topmenu5">
<img src="/eccube_1/html/template/default/img/menu/column.png">
</li>
<li class="topmenu8">
<img src="/eccube_1/html/template/default/img/menu/FAQ.png">
</li>
</ul>
</nav>
Note - I also tried to include FULL URL of the image
but somehow its not showing up on snippets :/
check this https://jsfiddle.net/1dvy2854/4/
.category-nav li {
display: inline-block;
}
#media only screen and (max-width: 600px) {
.category-nav li {
display: block;
}
.category-nav li img {
max-width: 65px;
display: inline-block;
}}
Make sure that the elements inside category-nav have correct margins and paddings.
If you want to make sure that the individual pictures for the menu look okay, you might want to set styles for the images one by one.
So, in your case you can edit the heights for all of your topmenu1, topmenu2...
Also, you can the inspect tool on Chrome to find what is causing problems like this in your CSS code. You can change the code live and see what change is causing what.
The sitemap of my page, I set it to click and show a second div (for more infos) when I preview the second div is already open and with the click closes and opens accordingly, I want the first time to display it, to be closed.
(The following example does not work, I do not know why, on m preview web it's ok)
<script>
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
</script>
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
`tthe first time to display it closed
You can add this code to the top of your script to hide it when the page opens.
$(".sitemapfooter").hide();
The best way is to use CSS as this will hide the element before the jQuery runs rather than once the DOM has loaded.
CSS
.sitemapfooter {
display: none;
}
Just set the inline style of the element to display: none, and then it will default to hidden on page load.
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter" style="display: none">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
Just add display: none to the sitemapfooter div, it will be hidden at startup.
.sitemapfooter {
display: none;
}
If I understand your question correctly you want the second div hidden by default.
In order to make that happen you have to change your css code targeting the class "sitemapline2" and add a display style of none.
This will cause the div with the class "sitemapline2" not to show in the beginning, and when you click the jquery function will run to change the css style to display:block showing your info div.
I really hope I'm not repeating an old question - I'm new to selectors so my terminology might be lacking.
I'm working on a tabbed single-page webpage based around this Default :target with CSS solution. I would like the current tab to have its link highlighted or altered in some way, to indicate the current location.
HTML:
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">This is text you should see as you load the page</div>
<div class="tab tab2">This is text that will appear after you click on tab 2</div>
CSS:
.tab {
display:none
}
.default-tab {
display:block
}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
ul#tabnav a:hover {
background: red;
}
ul#tabnav a:target{
border-width: thick;
border-color: black;
}
It seems like my last element (a:target) doesn't do anything, even though clicking on tabs does bring me to new anchors and change the displayed content. Any suggestions?
:target is the selector for the element on the page that has the id or name of the anchor name in the URL. So ul#tabnav a:target won't match anything, but if you change the selector to a:target, it will style the 2 links you have in the middle of the page, <a id="tab1"></a><a id="tab2"></a>
To style the "active" link in your navigation you'll need to use javascript to add a class on click, then style that class.
var $links = $('#tabnav a');
$links.on('click',function(e) {
e.preventDefault();
$links.removeClass('active');
$(this).addClass('active');
})
.tab {display:none}
.default-tab {display:block}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">
This is text you should see as you load the page
</div>
<div class="tab tab2">
This is text that will appear after you click on tab 2
</div>
You can use the bootstrap tabs it will solve you problem and works fine.
Please check the demo here
Hope this will solve you problem.
Happy Coding :)
am trying to make list ("ul"), where later then i add values with jquery, with .prepend() function. I would like to make all these new values, to be hidden, like out of div and later i will show them but then i add them, they must be hidden. Are there any way to do something like that?
I made a picture to show my problem, so what i wanted to do, id like i add 5 and 6 li element with JQuery and they must be in that "hidden area", and list in "visible area" wont change. So far i made that list, but then i add new element it goes in visible area, and li elements order on visible area goes like:"6, 5, 1, 2".
EDIT.
I tired to solve my problem with #mboldt suggestion, but it didnt worked for me or i did something incorrectly. My code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.item-list-inner {
float:left;
width: 600px;
overflow: hidden;
border:2px solid black;
}
.item-list-ul {
position:relative;
list-style-type: none;
margin: 0px;
padding: 0px;
width:9999px;
height:100px;
}
.item-list-ul li {
display: inline-block;
*display: inline; /*IE7*/
*zoom: 1; /*IE7*/
float: left;
}
.item{
width:80px;
height:80px;
border:1px solid red;
margin:7px;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<div class="item-list-inner">
<ul class="item-list-ul">
<li>
<div class="item">1</div>
</li>
<li>
<div class="item">2</div>
</li>
<li>
<div class="item">3</div>
</li>
<li>
<div class="item">4</div>
</li>
<li>
<div class="item">5</div>
</li>
<li>
<div class="item">6</div>
</li>
</ul>
</div>
</div>
</body>
</html>
But when i tried to prepend new element with jquery:
$(".item-list-ul").prepend("<li><div class='item'>jquery</div></li>")
New li element goes in from of list, instead in that "hidden" place:
First row is the result i want to get, like new element goes in that invisible (hidden area) and wont be shown until i rotate list.
Second row is the result i got now with my code. As you see then i prepend new li element it goes in front of list but in visible area, and moves other li elements.
You can add them class ".addClass( 'hidden' )" and in css file ".hidden{display:none;}
Later you just need to ".removeClass( 'hidden' )" to show them.
If you create the list item before you add it to the list you can sipmly hide it via the jQuery method like this
var item = $("<li>hidden item</li>");
$(item).hide();
$("#list").prepend(item);
Check out this jsfiddle, it only shows 3 list items but if you look at the source code with firebug you'll see another hidden list item was added.
However if you are trying to implement something like a slider, the the overflow-property might be the thing you are looking for (hard to tell with the information given).
EDIT
Now that you updated your question and I think I now know what you are trying to do I created a new jsfiddle with another solution. Check it out and see if that is what you are trying to do and if the code helps you.
In the jsfiddle there are two buttons, one to scrolle the list to the right and one to prepend an item to the "invisible area" on the left of the list.
Note: This is not really clean, i.e. when scrolling there are still borders showing, which should actually be hidden but I think this is good enough to show the idea.
I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> Home </li> </div>
<div class="nav_button"> <li> Contact us </li> </div>
<div class="nav_button"> <li> Shipping </li> </div>
<div class="nav_button"> <li> About us </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> Home </li>
<li class="nav_button"> Contact us </li>
<li class="nav_button"> Shipping </li>
<li class="nav_button" > About us </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float method make sure you are using a element specified with clear:both; in the end.
note that : if the parent element width is too short to display horizantally then
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
also
under li element if you have display:block; statement such as
li
{
display: inline;
}
li a{
display: block;
}
not work.
use
display:flex;
It's worked for me
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.