I have the following fiddle that when you run it shows a red border that indicates my div that is in question. Really I want my div to be under the 2 divs above it that are on the right and left sides.
The div in question is this:
<div id="Tabs" role="tabpanel" style=" position:relative; width:100%; border:1px solid red;">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">"U or R" Table Scripts</li>
<li>"U or R" Table CRUD</li>
<li>"E" Table Scripts</li>
<li>"X" Table Scripts</li>
<li>JSON DATA</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px; overflow:auto;">
<div role="tabpanel" class="tab-pane active" id="sqlOutput" ng-bind-html="sqlOutput | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane" id="sqlCRUD" ng-bind-html="sqlCRUD | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="sqlETable" ng-bind-html="sqlETable | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="xTableInserts" ng-bind-html="xTableInserts | unsafe" style="height:200px; overflow:auto;"></div>
<div role="tabpanel" class="tab-pane active" id="JSONDATA" ng-bind-html="JSONDATA | unsafe" style="height:200px; overflow:auto;"></div>
</div>
</div>
Please advise on what I need to change? You may notice in my fiddle that there are duplicate body instructions. I have the dashboard.css (bootstrap theme) and the bootstrap.css combined there.
You need to clear the floated elements. In this case you can use a <div class="clearfix"></div> between the two columns and your red div. I suggest using the bootstrap grid though.
https://jsfiddle.net/1bzpaLfd/1/
Related
I have made a layout for showing shopping products of an online store using Bootstrap 3 and it looks like this:
As you can see there is a gap between Films container and the separator line and I need to remove this gap. So the Films container would stick to the right side.
And here is the code for that:
<section>
<div class="flex-kit-game-shop-main">
<!--Books -->
<div id="training-kit" style="background-color: #339966 !important;" class="">
<div class="card bg-transparent border-0 m-r-card">
<div class="">
<div class="title-tab-shop">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
...
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="latest-products">
...
</div>
<div class="tab-pane container fade" id="most-bied">
...
</div>
<div class="tab-pane container fade" id="popular-products">
...
</div>
</div>
</div>
</div>
</div>
</div>
<!--Films -->
<div id="training-kit" style="background-color: #0066ff !important;" class="" >
<div class="card bg-transparent border-0 m-r-card" >
<div class="">
<div class="title-tab-shop">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
...
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="latest-products">
...
</div>
<div class="tab-pane container fade" id="best-selling-products">
...
</div>
<div class="tab-pane container fade" id="popular-products">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I can stick the Films container elements to the right by saying margin-right:-10px; but will affect the added products and make them bigger than their normal size.
So how can I properly make this Films container stick to the right in Bootstrap?
CSS File:
.flex-kit-game-shop-main {
display: flex;
flex-direction: row;
}
#media screen and (max-width: 1200px) {
.flex-kit-game-shop-main {
flex-direction: column;
}
}
Go to the your css file. Find ".flex-kit-game-shop-main" selector. Probably, display value of your top parent div element is "flex"(display:flex;). If it is, I would recommend that you research about conseption of "flexbox" in css. And then, you will be aware of what you should do.
A better option over here is to use the float property in CSS
select the box you wanna align to a side and then add float: left; also remember to clear the float if later you don't wanna use it further, for that add clear: both;
I'm using bootstrap 4 in a web application for organizing topography measurements.
On one page, a plot of such a topography is shown in an <div class='tab-content'> element.
There are two navigation pills, "Plot" and "Properties", which allow to select the tab contents.
Here is a simplified version of the original markup:
<div class="container">
<div class="row">
<!-- The leftmost column contain a vertical navigation bar -->
<div class="col-md-1 mb-2 border-right">
<div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
<a class="nav-link active" data-toggle="tab" href="#plot" role="tab">Plot</a>
<a class="nav-link" data-toggle="tab" href="#properties" role="tab">Properties</a>
</div>
</div>
<!-- Columns in the middle change depending on selected pill-->
<div class="col-8">
<div class="tab-content mt-2">
<div class="tab-pane fade active show" id="plot" role="tabpanel" aria-labelledby="plot-tab">
Some plot.
</div>
<div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
Some properties.
</div>
</div>
</div>
<!-- Rightmost 3 columns are a button area -->
<div class="col-3">
<div class="row p-3 pull-right">
<button class="btn btn-primary">
A button
</button>
</div>
</div>
</div>
And here is a fiddle, where you can see it in action.
The pills work, but my problem is that sometimes in my application (depending on the zoom level of my page) and also in the fiddle, the blue background of the selected pill overlaps with the border and with the tab contents:
Could someone give me a hint how to prevent the pills from overlapping, e.g. by CSS?
I would like to have the pills completely on the left of the vertical border.
leftmost column is overflowing the content because of col-1 , you can use bootstrap media query (xs, sm, md, lg, xl) for dividing columns.
<div class="container">
<div class="row">
<!-- The leftmost column contain a vertical navigation bar -->
<div class="col-md-3 col-4 mb-2 border-right">
<div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
<a class="nav-link active" data-toggle="tab" href="#plot" role="tab">Plot</a>
<a class="nav-link" data-toggle="tab" href="#properties" role="tab">Properties</a>
</div>
</div>
<!-- Columns in the middle change depending on selected pill-->
<div class="col-md-6 col-8">
<div class="tab-content mt-2">
<div class="tab-pane fade active show" id="plot" role="tabpanel" aria-labelledby="plot-tab">
Some plot.
</div>
<div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
Some properties.
</div>
</div>
</div>
<!-- Rightmost 3 columns are a button area -->
<div class="col-md-3">
<div class="row p-3 pull-right">
<button class="btn btn-primary">
A button
</button>
</div>
</div>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">A</li>
<li class="nav">B</li>
<li class="nav">C</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
Tab A is the default tab in most situations. But I want to visit tab B after this page loaded in certain conditions. Can I just visit the page via different URL with something like HTML anchor?
Thanks for any suggestions...
I'm trying to implement a html tabbed interface. For some reason clicking on a tab will kick me back to the homepage instead of showing a new list of data. Do I need to add a url route to the <a href> ?
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
If you mean you are just trying to show the contents of the tab then I would change your href="#something" to href="javascript: return false;" or put the code in your event handler.
Tested this over on Bootply
http://www.bootply.com/DqUJfu6r4z
You simply need to close the quotations on your IDs:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
Using bootstrap 3 I am trying this exameple, using class="active" in the li element. Unfortunatelly when the page initially shows up neither tab pane is shown, the whole tab content is empty. The tab navs displayed correctly and when I explicitly click on a tab, the correct pane show up.
What I am missing?
Thanks in advance.
<ul class="nav nav-tabs">
<li class="active">graduation</li>
<li>graduate</li>
<li>extension</li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade" id="graduation">
<p>
anything
</p>
</div>
<div class="tab-pane fade" id="graduate">
<p>
graduate
</p>
</div>
<div class="tab-pane fade" id="extension">
<p>
extension
</p>
</div>
</div>
You also need to specify the active class on the default tab-pane (and for fading tabs you need to add the in class), thus you should change
<div class="tab-pane fade" id="graduation">
to
Bootstrap 3
<div class="tab-pane fade in active" id="graduation">
Bootstrap 4
<div class="tab-pane fade show active" id="graduation">
Bootstrap 4
<div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">
Bootstrap 3
<div class="tab-pane fade in active" id="graduation">
<div class="tab-pane fade in" id="graduation">
In case someone was here looking for a solution for react-bootstrap (like I was). There's a defaultActiveKey attribute you can specify on the Tab component. Reference