I want to use one tab navigation to control 2 tab-content blocks using foundation 6. At the moment my first tab-content blocks works as it should the second does not. When I click the second tab it adds the contents of the second tab to the bottom of the first in the second tab-content container and doesn't remove it.
<div class="cell medium-6 text-padding">
<ul class="tabs" data-tabs id="floorplan">
<li class="tabs-title is-active">Ground Floor</li>
<li class="tabs-title">First floor</li>
</ul>
<div class="tabs-content" data-tabs-content="floorplan">
<div class="tabs-panel is-active" id="ground">
<p>Tab 1</p>
</div>
<div class="tabs-panel" id="first">
<p>Tab 2</p>
</div>
</div>
</div>
<div class="cell medium-6">
<div class="tabs-content" data-tabs-content="floorplan">
<div class="tabs-panel is-active" id="ground">
<p>Tab 1</p>
</div>
<div class="tabs-panel" id="first">
<p>Tab 2</p>
</div>
</div>
</div>
</div>
</section>
The Tab Content uses id's so you can't get away with using two sets of tab content with the same id's.
If you have to control the tabs from one set of buttons, then you might switch to data-attributes and use the custom methods to trigger a tab change. https://foundation.zurb.com/sites/docs/tabs.html#js-functions
Related
I am using bootstrap with flask to build a web app. my code is as follows:
<div class="container col-xs-12">
<div class="jumbotron" style="background:url({{ url_for('static', filename='jumbotron-grass-bw.png') }});
background-size:cover;">
<h2><strong>Even we are ordinary, we can live better!</strong></h2>
<p style="color:#333333">I make PERSONAL server by which we can share information without control from those "big" and reach the real FREEDOM.</p>
<p> </p>
</div>
<ul class="nav nav-pills nav-stacked col-xs-2">
<li class="active">Personal</li>
<li>Circle1</li>
<li>Circle2</li>
<li>Circle3</li>
</ul>
<div class="tab-content col-xs-10">
<div class="tab-pane active" id="tab1">
<p>Tab 1 content goes here...abcdektessseedddddddddddddd here..ahaha!</p>
</div>
<div class="tab-pane" id="tab2">
<p>Tab 2 content goes here...</p>
</div>
<div class="tab-pane" id="tab3">
<p>Tab 3 content goes here...</p>
</div>
<div class="tab-pane" id="tab4">
<p>Tab 4 content goes here...</p>
</div>
</div>
</div>
I am using IPHONE6 as the test device to verify the display effect on a very small screen, and I get the following result:
There is NO problem on larger screen resolution.
So is there a bug for bootstrap display on very small screen or I did a wrong coding?
Thanks!
Well there are several things you could do:
Adjust your code. Even though your col formation is correct, it doesn't seem to suit your best interest in the designing of this particular web page. Try changing it so the tab menu is a bit wider with lets say col-xs-4 instead of col-xs-2 as you previously did. This way when you resize down to an iPhone 6, your problem should be fixed. The example code is down below:
<ul class="nav nav-pills nav-stacked col-xs-4">
<li class="active">Personal</li>
<li>Circle1</li>
<li>Circle2</li>
<li>Circle3</li>
</ul>
<div class="tab-content col-xs-8">
<div class="tab-pane active" id="tab1">
<p>Tab 1 content goes here...abcdektessseedddddddddddddd here..ahaha!</p>
</div>
<div class="tab-pane" id="tab2">
<p>Tab 2 content goes here...</p>
</div>
<div class="tab-pane" id="tab3">
<p>Tab 3 content goes here...</p>
</div>
<div class="tab-pane" id="tab4">
<p>Tab 4 content goes here...</p>
</div>
</div>
You could try and change the ratio again so it suits you better, until you've met your required criteria.
Use media queries. If you are still having issues, try using media queries in order to style the mobile version to your liking. This way you can specify the screen width and height in your code. W3S Media Queries
Here is a JS Fiddle with my solution on point 1.
Solution regarding point 1
i'm using bootstrap tab and i want to divide this tab with bootstrap grid system but because of the float:left; , tabs background not showing.
here is my code;
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="col-lg-6">
<h3>Categories</h3>
</div>
<div class="col-lg-6" >
<h3>Datasets</h3>
</div>
</div>
if i don't add this col-lg-6 classes it is working properly , thank you for your suggestions
Fixed Code; (just added row class before grid classes)
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="row">
<div class="col-lg-6">
<h3>Categories</h3>
</div>
<div class="col-lg-6" >
<h3>Datasets</h3>
</div>
</div>
</div>
I'm guessing at what the actual problem is, but you almost always want to wrap columns in a row element.
<div class="row">
<div class="col-xs-6">
<h3>Categories</h3>
</div>
<div class="col-xs-6">
<h3>Datasets</h3>
</div>
</div>
Demo
The row element forces the tab element to clear the floated columns. If you already have a row element outside the tab panes, either move it inside or add a full-width column outside and a row inside.
Fiddle updated with tab color.
I am using bootstrap to build my site and in one location I have two divs stacked on top of each other to the right of an image. The two divs should each be half the height of the image as long as the browser is over 767px and be responsive as well.
Here is a jsfiddle: http://jsfiddle.net/dC7z5/
<div class='row subhead'>
<div class='col-sm-9'>
<img src="http://placekitten.com/900/554" class="img-responsive" />
</div>
<div class='col-sm-3'>
<div class='row'>
<div class='col-sm-12 services'>
<p>Services</p>
<ul>
<li>first service</li>
<li>another service</li>
</ul>
</div>
</div>
<div class='row'>
<div class='col-sm-12 specs'>
<p>Tech Specs</p>
<ul>
<li>one spec</li>
<li>second spec</li>
</ul>
</div> <!-- end specs -->
</div>
</div>
</div>
Here's an image of what I'm trying to do: http://laurenpittenger.com/here/wp-content/uploads/2014/01/Screen-Shot-2014-01-05-at-4.46.31-PM.png
Create a div container that contains both the Service box, and the Tech Specs Box. Then, in the css, make the container the same height as the image. Do this to the Service and Tech Specs Box:
height:50%;
I'm using the Foundation CSS framework create and off-canvas-menu, however, when I click the off-canvas-toggle anchor, the menu slides in and covers the entire screen. I am unable to get out of the menu. The example on the foundation page (http://foundation.zurb.com/docs/components/offcanvas.html) doesn't have this problem. Am I doing something wrong/missing something?
<div class="fill-h off-canvas-wrap move-right">
<div class='fill-h inner-wrap'>
<aside class="left-off-canvas-menu">
Left off canvas menu
</aside>
<div class="row fill-h">
<div class="xlarge-2 large-3 medium-1 columns show-for-medium-up fill-h" id="a">
<div class='row' id='navTabs'>
<div class='small-4 columns active'><img src='/img/icon.png' /><br/>Current</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>New</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>Phone</div>
</div>
<div id="navListing" ui-view="vw-listing">
</div>
<div id='nav_footer' class='small-12'>
<div id="adminMenuBtn">
Admin
</div>
footer
</div>
</div>
<div class="xlarge-10 large-9 medium-11 columns" ui-view="vw-details2">
<div style='background-color:#333;float:left;'>
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</div>
<div ng-include="views/interactions/details-blank.html"></div>
</div>
</div>
<a class="exit-off-canvas"></a>
</div>
</div>
I have a website that is using tabs to switch between different content. In that content I have a box of design elements. What I would like to happen though is for that box to stay constant within all the tabs without repeating the html for it six or seven times. Is this possible?
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Cover Design</li>
<li>Video Trailers</li>
<li>Web Banner</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="design">
<h2>Design Elements</h2>
<ul>
<li>This is the content that need to be static</li>
<li>Skill: I'm skilled!</li>
<li>Skill: I'm skilled!</li>
<li>Skill: I'm skilled!</li>
</ul>
<p>Content that needs to be switched between tabs</p>
</div>
</div>
Any help would be wonderful. I only placed one of my tabs above to show an example, If I posted them all then it would be too long to read.
This is how you can accomplish this... bring your static content out of the .tab-pane div but still under the .tab-content div. Live Example
<div class="tab-content">
<h2>Design Elements</h2>
<ul>
<li>This is the content that need to be static</li>
<li>Skill: I'm skilled!</li>
<li>Skill: I'm skilled!</li>
<li>Skill: I'm skilled!</li>
</ul>
<div class="tab-pane active" id="design">
<p>Content that needs to be switched between tabs 1</p>
</div>
<div class="tab-pane" id="video">
<p>Content that needs to be switched between tabs 2</p>
</div>
<div class="tab-pane" id="web">
<p>Content that needs to be switched between tabs 3</p>
</div>
</div>