I have multiple divs with bootstrap tabs (using collapse) side by side as you can see here:
https://codepen.io/MichaelBootstrap/pen/wvMZOob
<div id="mgvo-content">
<div id="mgvo-main" class="mgvo-tab">
<ul class="nav nav-tabs mgvo-submenu mgvo-main-submenu">
<li class="active"><a data-toggle="tab" href="#mgvo-main-m1">Hauptmenu</a></li>
<li class="mgvo-submenu-item"><a data-toggle="tab" href="#mgvo-main-m2">Menu 1</a></li>
</ul>
<div class="mgvo-tab-content tab-content">
<div id="mgvo-main-m1" class="tab-pane fade in active">
</div>
<div id="mgvo-main-m2" class="tab-pane fade mgvo-tab-content-item">
</div>
</div>
</div>
<div id="mgvo-side1" class="mgvo-tab">
<ul class="nav nav-tabs mgvo-submenu">
<li class="active"><a data-toggle="tab" href="#mgvo-side1-m1">Home</a></li>
<li class="mgvo-submenu-item"><a data-toggle="tab" href="#mgvo-side1-m2">Menu 1a</a></li>
</ul>
<div class="mgvo-tab-content tab-content">
<div id="mgvo-side1-m1" class="tab-pane fade in active">
</div>
<div id="mgvo-side1-m2" class="tab-pane fade mgvo-tab-content-item">
</div>
</div>
</div>
<div id="mgvo-side2" class="mgvo-tab">
<ul class="nav nav-tabs mgvo-submenu">
<li class="active"><a data-toggle="tab" href="#mgvo-side2-m1">Home</a></li>
<li class="mgvo-submenu-item"><a data-toggle="tab" href="#mgvo-side2-m2">Menu 1b</a></li>
</ul>
<div class="mgvo-tab-content tab-content">
<div id="mgvo-side2-m1" class="tab-pane fade in active">
</div>
<div id="mgvo-side2-2" class="tab-pane fade mgvo-tab-content-item">
</div>
</div>
</div>
</div>
For large sceens thats fine, but of cause, on smaller screens if have to collapse the 3 tab bars to one (an one mobile to a burger menu). Collapse the tabs to one isn't a big thing, ever tab bar contain all entry s and based on sm, md, xl they are displayed.
But i'm worry about how to move the content (which can be a form with current unsaved changes) from one tab bar to the first on.
The first idea: set up a Java Script with triggers each window size change and find out if a breakpoint is hit, if, then move the content with jquery from one tab bar to the other. But watch each change of window ist little bit ineffient.
Has any one a better idea? May using CSS an Bootstrap4 only? (Some mixin, CSS before/after)
Concrete questions: How can collapse side1 und side2 (see codepen) into the first tab bar on smaler screens. May the solutions does not "move" anythink but change some views.
I'd didn't need a complete coding, an idea will be fine.
(one option will may be, the the upper tab bars are not 3 diffent bars but only one which if formated to look like 3 (with some align ..) but thats just a guess ..
I don't know if it is exactly good practice but you can always use the .d-none class in bootstrap to hide elements based on breakpoints and d-block to show them.
For example
.d-xl-none
Hides an element only in the extra large breakpoint.
The downside would be having to repeat some elements.
Related
How can I style the page that the display to be the same on the small screen and also on the large screen? On the large screen everything is perfect, but if I move the page on a smaller screen, then the things start to mess up. The following code: (it is made with bootstrap and css)
<div class="list-group">
<ul class="panel-info col-lg-12 list">
<li class="list-group-item list__item col-lg-4" ng-repeat="entity in entitiesPaginated">
</li>
</ul>
</div>
I will not write here all the code because I think the most important part is the bootstrap part, what should I change on it in order that the display to be the same no matter the screen display? Thank you
Only use the grid class for the smallest breakpoint...
<div class="list-group">
<ul class="panel-info col-12 list">
<li class="list-group-item list__item col-4">
</li>
</ul>
</div>
From the Bootstrap 4 docs...
For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes.
Note that in Bootstrap 4 Beta, the -xs- infix is no longer used since xs is the default breakpoint. It's simply col-12 instead of col-xs-12.
set col classes also for the other viewports: col-md-,col-sm-,col-xs-*
Here an example:
<div class="list-group">
<ul class="panel-info col-lg-12 col-md-12 col-sm-12 col-xs-12 list">
<li class="list-group-item list__item col-lg-4 col-md-4 col-sm-4 col-xs-4" ng-repeat="entity in entitiesPaginated">
</li>
</ul>
</div>
You should read about the Bootstrap grid system
This is troubling because the only reason I want a topbar is for smaller screens. The dropdown works fine in medium and large, but disappears on smaller screens. I've read it needs to be inside a 12-width column, but that doesn't seem to help. It actually introducted another (minor) problem where the bar no longer fills the screen's width. The dropdown is only 4 characters, how could it be too large? What am I missing here?
<div class="row">
<div class="fixed small-12 medium-12 large-12 column">
<nav class="top-bar" style="color: white;" data-options="is_hover:false" data-topbar="">
<ul class="title-area">
<li class="name"></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Menu
<ul class="dropdown">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
large:
small:
It still needs some tweaking, but I fixed it. I added
style="display: none;"
to
<ul class="title-area">
It looks like they were both trying to occupy the same space.
I've read it needs to be inside a 12-width column...
I really don't think that this is right; that is the reason for the problem you introduced.
Actually I would change
<div class="fixed small-12 medium-12 large-12 column">
to
<div class="fixed">
If want it to show for small screens only then you could do like this
<div class="fixed show-for-small-only">
Also don't forget to reinitialize or reapply listeners as per documentation (at the very bottom of the page).
$(document).foundation();
and
$(document).foundation('topbar', 'reflow');
Also note the list items should contain links. Change
<li>Test</li>
<li>Test</li>
<li>Test</li>
to
<li>Test</li>
<li>Test</li>
<li>Test</li>
It's not exactly the same, but maybe helpful. I use top-bar for medium and larger screens, and I use tab-bar for small screens.
You can find inspiration on my website. Feel free to inspect it. It's also on GitHub.
It is based on the Zurb-Foundation 5 documentation. Shouldn't be too difficult to cope with I hope.
Also noticed you are missing the mobile menu icon.
Should be an li in the title-area
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
I am new Bootstrap and have been trying to get my head around documentation but finding it a bit confusing.
My page has three blocks: a main header, a side navigation, and a main content.
I could easily do a layout with CSS but I am using Bootstrap and wanted to use this to do a responsive layout.
On a regular screen I would like it to be as follows (where header takes full width):
[HEADER]
[NAV][MAIN]
Then on a small screen:
[HEADER]
[NAV]
[MAIN]
But on a smallscreen I would like nav to be collapsed. My nav is "nav nav-list bs-docs-sidenav" and I am not sure how to get that effect with this.
Thanks very much for any help.
Here is the html. Not that it gives you much more info.
<body>
<header>
<h1>title</h1>
</header>
<nav>
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
<li><a class="parent">item 1</a>
<ul class="bs-docs-sidenav" style="display:none;">
<li>
<a href="#">
subitem 1
</a>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</nav>
<main class="content">
<p>content</p>
</main>
</body>
The answer is to use col--
This tells you how many columns the block should take up on different size screens.
Still would like the menu box to shrink into 1 item on a small screen, but this is good enough.
<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>
I have a Google Chart that displays fine in its own page /graph/map_freq but is sized down when I display it as a tab content.
Here's the tabbable code:
<div class="tab-pane" id="map_freq">
<%= render "graph/map_freq" %>
</div>
Here's the code in graph/map_freq.html.erb:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I am pretty sure this is related to tabbable component of Bootstrap.
You shall mark it up like so...
<ul class="nav nav-tabs" id="map_freq">
<li class="active"><a data-toggle="tab" href="#featured-members">Your Tab Name</a></li>
</ul>
<div class="tab-content" id="yourId">
<div id="map_freq" class="tab-pane active fade in">
Your Content Here.
</div>
</div>
The code shall output a page similar to THIS ONE.