Move content out and in and bettween different bootstrap4 tab bars - css

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

Want display page the same no matter the screen size bootstrap

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

Zurb Foundation topbar dropdown disappears on small screens

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>

Multiple bootstrap tabs - vertical & horizontal

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

Create a responsive layout in bootstrap

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>

<div> element not showing full size in twitter bootstrap tabbable

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.

Resources