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>
Related
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
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 am using tab through jquery now I want to add nested tab in tabs. MY problem is when I click on nested tab it will hide main tab and no content will show onclick on nested tab
Here is my code:-
<div id="tabs-container" class="TabView" >
<ul class="tabs-menu">
<li class="current">Guest</li>
<li>Owner</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
<ul class="tabs-menu">
<li>Me as Guest</li>
</ul>
<div id="subtab-1">test2</div>
</div>
</div>
Kindly advise me any solution.
Without seeing the jQuery part of the code nor the CSS we can only guess, anyway probably the problem is that you have to assign a different classname to the ul block in the nested tab. Like this:
<div id="tabs-container" class="TabView" >
<ul class="tabs-menu">
<li class="current">Guest</li>
<li>Owner</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
<ul class="subtabs-menu">
<li>Me as Guest</li>
</ul>
<div id="subtab-1">test2</div>
</div>
</div>
I have some html that is rendered by Flask. I have three navigation tabs that the user can click on to see different panels. This is the relevant code:
<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Pick Colors
</li>
<li>Add Text
</li>
<li>Add Logos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="well">
<ul class="nav">
<li class="color-preview" title="White" style="background-color:#ffffff;"></li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="well">
<div class="input-append">
<input class="span2" id="text-string" type="text" placeholder="add text here...">
<button id="add-text" class="btn" title="Add text"><i class="icon-share-alt"></i>
</button>
<hr>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div id="avatarlist">
<img style="cursor:pointer;" class="img-polaroid" src="static/img/img1.png">
</div>
</div>
</div>
When I open the HTML file by itself, I can click on the different tabs and get the relevant tab-pane's to open up. When the page is rendered by Flask though, I'm unable to get the functionality to work. Clicking the tabs doesn't do anything. What am I doing wrong?
I understand Flask uses Jinja templates so I must not be understanding that properly, but I'm not sure how to fix it. Thanks in advance for your help.
I just fixed it. The issue was that
<li>Add Text
</li>
<li>Add Logos
Should've said data-toggle="tab" instead of tab#.
How to have one form one several Twitter Bootstrap tabs?
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Tab1
</li>
<li>
Tab2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
<form id="personal-data" class="form-horizontal">
...
</div>
<div class="tab-pane" id="2">
<!-- form controls to be continued here -->
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
What's wrong of having one <form> that wraps everything up?
<form id="personal-data" class="form-horizontal" method="POST" action="#">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Tab1
</li>
<li>
Tab2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
...
</div>
<div class="tab-pane" id="2">
<!-- form controls to be continued here -->
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</form>
are you submitting tab by tab or once on the last tab?
if one-by-one (for exemple, validation), simply use $.post to send data back and forward on-the-fly (in other words, make ajax calls).
I just bumped into the same problem, if you want to submit once in the last tab, I assume there's a button somewhere to move beetwen tabs. By default clicking those buttons will trigger the POST request. To prevent this add following line to your button click funciton:
event.preventDefault();