i added a data-toggle="collapse" to a link in nav side bar , and when link is clicked > should change to v ,when another tab is clicked it should change to >
but looks like collapse functionality is not working . in CSS i have the code to change icons , Can someone pint out the issue here
Thanks in advance
Below is the code snippet :-
<body>
<div class="container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<nav class="nav-sidebar">
<ul class="nav tabs">
<li class="active">tab1</li>
<li class=""> Tab2</li>
<li class=""> Tab3</li>
</ul>
</nav>
</div>
<!-- tab content -->
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 tab-content">
<div class="tab-pane active text-style collapse in" id="tab1">
<p> This is Tab1 content </p>
</div>
<div class="tab-pane text-style collapse" id="tab2">
<p> This is Tab2 content </p>
</div>
<div class="tab-pane text-style collapse" id="tab3">
<p> This is Tab3 content </p>
</div>
</div>
</div>
</body>
in css file
.nav-sidebar a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.nav-sidebar a.collapsed:after {
content: "\e080";
}
A couple of things here. You don't need to use the collapse with this as you are using bootstrap's tabs so you can scratch the collapse. So you don't need to put the data-target and data-toggle in the href's as bootstraps tabs will take care of this you just need to use data-toggle="tab" and it will toggle the tab by the href value. Then you can remove the collapse class from your tab panes as well. That being said bootstap will change the active class of the li when you click on the link so you can change your after content from there. So it will look like so:
Here is a fiddle showing you the changes Fiddle
Revised Html:
<ul class="nav tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
</ul>
</nav>
</div>
<!-- tab content -->
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 tab-content">
<div class="tab-pane fade active in" id="tab1">
<p> This is Tab1 content </p>
</div>
<div class="tab-pane fade" id="tab2">
<p> This is Tab2 content </p>
</div>
<div class="tab-pane fade" id="tab3">
<p> This is Tab3 content </p>
</div>
</div>
</div>
Revised Css:
.nav-sidebar a:after{
content: "\e114";
font-family: 'Glyphicons Halflings';
color: grey;
float: right;
}
.nav-sidebar li.active a:after{
content: "\e080";
}
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 have a list of tabs which can be a category. The content for that specific tab or category should be shown just near and a bit bottom on its respective tab so that it gives a look of parent and children.
Here is how i have done
<div id="teams" class="tabbable tabs-left">
<div class="container">
<div class="row">
<nav class="nav flex-column col-md-1 teamTab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" href="#category1-tab" data-toggle="pill" role="tab">Category1</a>
<a class="nav-link" href="#category2-tab" data-toggle="pill" role="tab">Category2</a>
<a class="nav-link" href="#category3-tab" data-toggle="pill" role="tab">Category3</a>
</nav>
<div class="tab-content col-md-11">
<div class="tab-pane active" id="category1-tab" style="padding-left: 60px; padding-right:100px">
<h5 class="card-title">Name</h5>
<p class="card-title">position</p>
</div>
<div class="tab-pane" id="category2-tab">
<h5 class="card-title">Category 2 Name</h5>
<p class="card-title">position</p>
</div>
<div class="tab-pane" id="category3-tab">
<h5 class="card-title">Category 3 Name</h5>
<p class="card-title">position</p>
</div>
</div>
</div>
</div>
</div>
currently, the content for all tabs is shown at the same place. However, i wanted the content to be shown just beside(with a little bit in bottom position) its respective tab.
--Category 1
name position
Category 2
category 2 name position if clicked this one show in this
position
Category3
similarly if clicked here should be shown its related content
here not on the top
Please try this solution:
Add .child class to all your content DIVs having class .tab-pane and remove inline styles.
.child {
padding-left: 60px;
padding-right:100px
}
Then use this JS code to show Tab content below the Tab title.
$(document).ready(function() {
$('.nav-link').each(function(){
var content_id = $(this).attr('href');
$(this).after($(content_id).hide());
if($(this).hasClass('active')) {
$(content_id).show();
}
});
$('.nav-link').on('click', function(){
var content_id = $(this).attr('href');
$('.tab-pane').hide();
$(content_id).show();
});
});
Hope it will work for you. OR check working code here
My html page contains one header, two divs (say div1 and div2) and one footer. I have given height to header, one div and footer. Now, I want the other div to take vertical height of any screen(phones, tablets, desktop. larger desktop etc.) minus the combined height of header, div1 and footer i.e, height of div2 = height of screen-(height of header+height of div1+height of footer) with scrollbar. Inside div 2 I am showing cards with some information just like chat application(whatsapp) which is appending dynamically using JavaScript. In third div, I am appending dynamically created chats to the Div with id "chat-body".
I am trying calc(100vh - (combined height of header+div1+footer)). It is coming fine for desktop but for smaller screens scroll bar for third div is going inside footer.
<header class="topBar">
<ul class="nav nav-tabs row" id="myTab" role="tablist">
<li class="nav-item col">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="chat()">Chat</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Incident</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Service Request</a>
</li>
</ul>
</header>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="container">
<div class="row h-100">
<div id="topButtons" class="card-body" style="padding-bottom: 0;"></div>
<div id="chatBody" class="card-body anyClass" onscroll="myFunction()">
<p class="WC_message_fl"><img class="con_im" src="images\chatrobo.png"></p>
<p class="WC_message_fl sahlaIntro"> Type your Questions & Start chatting with Sahla bot.</p>
</br>
</br>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
</br>
</br>
<p class="WC_message_fl" id='msg_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;">
<div class="row" id="table"></div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
</br>
</br>
<p class="WC_message_fl" id='msg_sr_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;">
<div class="row" id="sr_table"></div>
</div>
</div>
</div>
<footer class="footr" id="footerChtbt">
<div id="myBtn" onclick="topFunction()"><img title="Go to top" src="images/GOTOTOP.png" style="width:65px;height:65px;"></div>
<div class="input-group" style="width: 90% !important;">
<input id="query" type="text" class="dir-auto form-control" placeholder="Ask Sahla bot..." onkeyup="pressedkey(event)" style="outline:0;box-shadow:none;border-width:0px;font-size:14px;" required>
<div class="input-group-append" style="margin-left: 1%;">
<img src="images/send_icon.svg" name="submitbtn" id="submitbtn" onClick="sendbtn()" style="cursor: pointer;">
</div>
</div>
</footer>
Try once using 100% instead 100vh
eg: height: calc(100% - number)
I have this structure:
<div class="container"><div class="row">
<div class="col-sm-10 col-xs-12">
<input id="searchBar">
</div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
</div></div>
and I'm trying to hide the right navbar on mobile screens. I set it to xs-hidden, but it still shows up.
Is there a way to hide a navbar on xs screens?
Use .hidden-xs css class (not .xs-hidden).
<div class="container hidden-xs"><div class="row">
<div class="col-sm-10 col-xs-12">
<input id="searchBar">
</div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked hidden-xs">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
</div></div>
To help others and you reference the Bootstrap documentation "Responsive utilities"
As pointed out by Nicolapps you would use .hidden-xs
<div class="container">
<section class="row"
<div class="hidden-xs col-sm-10">
<p>content</p>
</div>
<div class="hidden-xs col-sm-2">
<p>content</p>
</div>
</section>
</div>
You can try something llike this stuff
you should set icon pointer events as none
.container {
position: relative
}
i {
position: absolute;
top: npx;
left: npx;
pointer-events: none;
}
select {
font-size: 0;
}
Which class i need to use for tabbed panel? Is there one?
i do the following and looks bad :-(
A tabbed navigation + a panel with and 0 padding between them-
<div id="dashboardheader" class="container" style="padding-top: 20px;">
<ul class="nav nav-tabs tab-pane">
<li class="active">Dashboard</li>
</ul>
</div>
<div id="dashboardpanel " style="padding-top: 0px">
<div class="panel panel-primary container" style="padding-top: 30px;">
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div class="row">
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" onclick="OpenDialog()" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div class="row">
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
</div>
</div>
</div>
</div>
</div>
whats the alternate?
I think what you want is just the regular bootstrap tabs
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
Demo in jsFiddle
With a little bit of styling, you can get it to look how you want:
For V4, you'll want to style with the .nav-tabs class and also invoke the tab JavaScript plugin
Here's some simple less you can add that allows you to include .nav.nav-tabs inside a .panel .panel-heading
An example codepen : http://codepen.io/anon/pen/utGaK
IMHO it doesn't quite look as "clean" as the components are when used independently w/o additional styles..
I've tested it with .panel-title too using .pull-right on the .nav. While it worked I found it best to add .clearfix to the header as the tabs are 1/2px too tall ATM. Should be simple to resolve it.
Here's the code I use in the above example.
For example :
<div class="panel panel-default">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
<!-- Tab panes + Panel body -->
<div class="panel-body tab-content">
<div class="tab-pane active" id="home">HOME</div>
<div class="tab-pane" id="profile">PROFILE</div>
<div class="tab-pane" id="messages">MESSAGES</div>
<div class="tab-pane" id="settings">SET</div>
</div>
</div>
This is the less :
// Need to compensatve for padding in panel-heading
// Must be a way to invert this
// variable - #panel-heading-padding.
#panel-heading-padding-negate: -10px -15px;
.panel {
.panel-heading {
.nav-tabs {
margin:#panel-heading-padding-negate;
border-bottom-width:0;
> li {
> a {
// re-apply the original padding
padding:#panel-heading-padding;
margin-bottom:1px;
border:solid 0 transparent;
&:hover {
border-color: transparent;
}
}
&.active > a {
&,
&:hover,
&:focused {
border:solid 0 transparent;
}
}
}
}
}
}
UPDATE
I've added the following to the li definition and removed the margin-right & border-radius on the > li > a so that when I pull the nav to the right of the header it fits & looks cleaner.
&:first-child > a {
border-top-left-radius:#panel-border-radius;
}
&:last-child > a {
border-top-right-radius:#panel-border-radius;
}
Here's an updated codepen : http://codepen.io/anon/pen/hJsEC
There's a Bootsnipp snippet that does this: http://bootsnipp.com/snippets/MaA0A
It contains CSS to allow embedding tabs in the panel header like this:
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!--...-->
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<!--...-->
</div>
</div>
</div>
Result:
Found a simple styling solution based on Andrew Scott's html structure:
.panel-heading>.nav-tabs {
border-bottom: none;
margin-bottom: -10px;
}
<ul class="nav nav-tabs ">
<li class="active" > One </li>
<li > Two <li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane fade in active" id="One">
This is one
</div>
<div class="tab-pane fade " id="Two">
This is Two
</div>
</div>