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.
Related
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%?
It's probably a silly question, but I don't understand why it doesn't work.
I need to create a bootstrap menu where each item is an image on the left and several lines of text on the right.
I wrote the following HTML for this:
<div class="btn-group">
<ul class="dropdown-menu" style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<span>My image</span>
</div>
<div class="pull-left">
<div>Text on the right</div>
<div>Second line of text</div>
</div>
</a>
</li>
</ul>
</div>
Link to jsfiddle: https://jsfiddle.net/brucecat5/rr71xmry/
However, width is not calculated properly and the second floated block is moved below the first block.
I don't understand why it happens and what to do to fix this.
P.S. I know I can implement it with display: table-cell, but I just don't understand the reason why my approach doesn't work.
I think problem is how you use dropdown-menu class, try this:
<div class="btn-group">
<ul style="display: block;">
<li>
<a href="#" class="clearfix">
<div class="pull-left">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</div>
<div class="pull-right">
<p>Text on the right</p>
<p>Second line of text</p>
</div>
</a>
</li>
</ul>
If you want use a dropdown-menu, you can look an example in this page:
https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Hope it helps.
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 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.
My dropkick look strange - http://i.imgur.com/0itAA.png
Container is bigger, than dropdown list.
My html:
<div class="text_over_field">
<b>Your language preferences</b>
<b>This is language you would like Print-it-Green service to be displayed in</b>
</div>
<div class="field">
<div class="dk_container dk_theme_default" id="dk_container_color" tabindex="7" style="display: block; ">
<a class="dk_toggle" style="width: 149px; ">
<span class="dk_label">English</span></a>
<div class="dk_options" style="top: 29px; ">
<ul class="dk_options_inner">
<li class="dk_option_current"><a data-dk-dropdown-value="">English</a></li>
<li class=""><a data-dk-dropdown-value="#E15A01">Israeli</a></li>
<li class=""><a data-dk-dropdown-value="#604A42">Ukrainian</a></li>
</ul>
</div>
</div>
</div>
<div class="submit" >
</div>
Check the CSS markup
Check the HTML markup
All is wrapped in form_for_new class.
Also, it crashed my form.
What you can say about it ?