i am using foundation 5 and copied the html code for the horizontal tab
<ul class="tabs" data-tab>
<li class="tab-title active">Tab 1</li>
<li class="tab-title">Tab 2</li>
<li class="tab-title">Tab 3</li>
<li class="tab-title">Tab 4</li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
<div class="content" id="panel2-4">
<p>Fourth panel content goes here...</p>
</div>
</div>
now the css is not being applied to the sample code.
Please help me where can i find the css.
thanks.
Foundation 5 tabs have been switched from ul to dl below is the structure the want
<dl class="tabs" data-tab>
<dd class="active">Tab 1</dd>
....
link on git
the docs are outdated
Have you downloaded the essentials package. you should try to download the complete one as the essentials don't have css applied.
nolawi petros' answer is the correct one: they changed the syntax without updating the documentation.
Here is the full syntax (same as the one nolavi linked to, just a bit shorter):
<dl class="tabs" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
</div>
On the plus side, they fixed deep-linking to an individual tab so the documentation is now correct regarding this. If you want to use deep linking you should include "data-options="deep_linking:true" in the first line, like so:
<dl class="tabs" data-tab data-options="deep_linking:true">
Note that you'll have to call foundation.tab.js for deep linking to work; otherwise tabs seems to work out of the box.
Related
I have a site that uses Bootstrap 3. In that site, I have a list of items. For each item, I want to show an icon. To the right of the icon, I want to show a blurb of text. Currently, I have this working for small amounts of text. However, when my block of text grows, it eventually gets to a point where the text block appears below the icon instead of beside it.
I've created a fiddle to demonstrate the problem here. The code looks like this:
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
This is some text that should appear to the right of the icon.
If this text is longer, it should wrap within this box.
</div></li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<ul class="list-inline">
<li>[icon]</li>
<li><div style="background-color:#ccc; padding:16px;">
Shorter blurbs appear beside like it should.
</div></li>
</ul>
</div>
</div>
</div>
Why isn't the second li always appearing to the right of the first li?
Instead of making lielements appearing side to side. Use the existing component of bootstrap Media object(more info here) to make it happen.
Check Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled">
<li>
<div class="media">
<div class="media-left">
<a href="#">
<span class="media-object">
<i class="fa fa-user fa-2x"></i>
</span>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
In Bootstrap version 3.2.1 to edit and delete links was right, after the upgrade to 3.3.0 right didn't get to level.
Class media-right is not suitable for this purpose, it's necessary, that block had no effect on the text below:
http://i.gyazo.com/b114acc7ce9ea2163511e2ebce600136.png
<div class="media">
<div class="media-body">
<ul class="list-inline small pull-right">
Put a div with style="clear:both" after ul closing tag.
e.g.
<ul class="list-inline small pull-right">
....
</ul>
<div style="clear:both;"></div>
I am using bootstrap 3.2.0. I have some content in the tabs and I want to create an anchor link to this content in the tabs to different websites. Here is my code:
<div class="bs-docs-example">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li> Sample#1 </h1></li>
<li> Sample#2 </h1></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1A">
<li id="ndf_35"></li>
</div>
<div class="tab-pane" id="2A">
<li id="ndf_36"></li>
</div>
</div>
</div>
</div>
I create the link like this :
some text
But it's not working. Does anyone have an idea how to fix this?
Demo
Its working fine.
Check that
You have included jquery (you need jquery for bootstrap.js)
You have included bootstrap.js
open <h1> tags
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
I'm updating the page for my company site. The footer here: applebees.com works correctly, but I ported the code to my WHMCS template and it's positioning the sitemap incorrectly. Any ideas what's going on? http://applebees.com/clients
<footer class="row1">
<div class="container1">
<div class="row1">
<div class="span2">
<h3>Sitemap</h3>
<ul>
<li>Home</li>
<li>Pricing</li>
</ul>
</div>
<div class="span2">
<br><br>
<ul>
<li>Reseller</li>
<li>Dedicated</li>
<li>Support</li>
</ul>
</div>
<div class="span2">
<br><br>
<ul>
<li>Terms Of Service</li>
<li>Privacy Policy</li>
<!--<li>#</li>-->
</ul>
</div>
<div class="span4">
<h3>Contact</h3>
<address>
<strong>applebees, LLC</strong><br>
San Francisco, CA<br>
Los Angeles, CA<br>
sales#applebees.com<br>
</address>
</div>
</div> <!-- /row -->
</div> <!-- /container -->
</footer>
CSS file for above page here: site/clients/templates/default/css/whmcs.css
The index.html page CSS (can't post hyperlinks): site/assets/css/style.min.css
I'm confused because I ported the code correctly, I think the divs are messing it up somehow?
In your case, the "noise" class gives some height of your div in armorshark.com. When you ported the region, you did not get the "noise" classed div. You can solve the with add the height: attribute on row1 class.