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.
Related
How can I achieve fixed tabs using angular and bootstrap :
Here is my code:
<div #header>
<div *ngIf="loaded; else loading">
<ul ngbNav #nav="ngbNav" [(activeId)]="selectedTab" [destroyOnHide]="false" class="nav-pnb-tabs nav-tabs">
<li [ngbNavItem]="'dashboard'">
<a ngbNavLink>Dashboard</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<dashboard></dashboard>
</div>
</ng-template>
</li>
<li [ngbNavItem]="'policyList'">
<a ngbNavLink>Policy List</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<policy-list></p-policy-list>
</div>
</ng-template>
</li>
<li class="nav-item" [ngbNavItem]="'policysearch'">
<a ngbNavLink>Search</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<policy-search></policy-search>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
</div>
I have to keep my tabs fixed while scrolling the content:
When I use: style="position:fixed; width:100%" it is not scrolling the content also.
If I used overflow:scroll on the content div, it is asking for height which if I set it, then my content inside scroll is getting cut after the certain height is reached.
Can you please help me how to achieve Fixed tabs using angular powered with bootstrap?
Thanks.
I'm trying to use v-select in admin panel in header (using CoreUI). I have a container with "display: flex"
https://codepen.io/kat15pl/pen/NWNZgQg
<div id="app" class="c-app">
<div class="c-wrapper">
<header class="c-header c-header-light c-header-fixed c-header-with-subheader">
<ul class="c-header-nav d-md-down-none mr-auto">
<li style="width: 100%;">
<v-select :options="options"/>
</li>
<li>
next div
</li>
</ul>
</header>
</div>
</div>
I think I do something wrong... but I don't see what:(
I want to not resize when select is opened.
I mean why input cannot be 100%?
I am using bootstrap 3.2.0. I have some content in the tabs and I want to create an anchor link to this content in the tabs to different websites. Here is my code:
<div class="bs-docs-example">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li> Sample#1 </h1></li>
<li> Sample#2 </h1></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1A">
<li id="ndf_35"></li>
</div>
<div class="tab-pane" id="2A">
<li id="ndf_36"></li>
</div>
</div>
</div>
</div>
I create the link like this :
some text
But it's not working. Does anyone have an idea how to fix this?
Demo
Its working fine.
Check that
You have included jquery (you need jquery for bootstrap.js)
You have included bootstrap.js
open <h1> tags
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'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>