I'm having trouble with bootstraps tabs and tabpanels not working with the active class as intended. I know there are many questions about this, but in all the ones I have read, adding and removing the inactive class is not working at all. In my case, it works... but kind of. First I'll provide the HTML:
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
</div>
</div>
The JavaScript comes from just including all the bootstrap 4 stuff.
So here's the thing, it starts off with some issues, being that as you click between the 3 tabs it will usually show 2 of them, but after clicking around for about 10 seconds it seems to fix itself and work completely as intended, showing only the content for the currently selected tab. I also use the same exact code with different names in other locations on my site, and it works perfectly fine.
Does anyone have any intuition into what would be causing the content to show incorrectly only the first 10 or so times clicking through the tabs, but then it works perfectly well until the page is refreshed?
First of all you have to apply active class properly.You have given active class to a link but it should be into li.nav-item and also in your nav items you have given your active class to #b-tab and in below given active class to a-tab content. Look at updated HTML code
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item active">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
a-tab content
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
b-tab content
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
c-tab content
</div>
</div>
I think there was a bug in the initial Bootstrap 4 code, I was using Bootstrap 4.0.0 beta when I encountered this issue. I downloaded Bootstrap version 4.1.3 and now the active class gets removed from the tab-pane as expected.
Related
I am currently working on a global search page. A user puts in a search, All results are displayed. But then I want the user to be able to click on certain tabs to display the results as well. It is currently bootstrapped. The all tabs is the only one that is currently working because it is the class is set to active. The all tab also wraps the other tabs. I will try to give an example if I wanted to display Events
I first have the nav tab section set like this...
<div class="search-tab">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#all">All</a></li>
<li><a data-toggle="pill" href="#events_tab">Events</a></li>
<li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
<li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
<li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
</ul>
</div>
And then the data I want to retrieve is wrapped inside the all div tab like the events_tab here.
<div id="all" class="tab-pane fade in active">
<div class="list-panel table-sort" id="events_tab">
this will display the events related to the search...
</div>
</div>
I am fairly new to using bootstrap. Any advice/tips would be a huge help. Thanks in advance!
Its a little unclear as to whether you want All to have nested tabs or not. However, regarding Bootstraps tab HTML markup pattern, you'll want to wrap your .tab-pane in a .tab-content wrapper. Also, be sure you're including jQuery as well as Bootstraps JS bundle (after jQuery) so the data- attributes can be used.
Updated HTML for non-nested tabs and tab panes
<div class="search-tab">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#all">All</a></li>
<li><a data-toggle="pill" href="#events_tab">Events</a></li>
<li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
<li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
<li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
</ul>
</div>
<div class='tab-content'>
<div id="all" class="tab-pane fade show active">
all area
</div>
<div id='events_tab' class='tab-pane fade'>
events area
</div>
</div>
Here is a fiddle showing the updated markup without nested tabs:
https://jsfiddle.net/onuj90dz/
If you're wanting to show the search results in addition to these other categories (events, appointments, calls, vendors), you could put the results in a non-tab container. A crude example in this fiddle: https://jsfiddle.net/onuj90dz/1/
I'm looking to expand and collapse the desktop version of the Bootstrap 4 navigation with a simple toggle button.
So example would be a menu button to click and will minimise menu items into the left side of the screen.
[Menu]
[Menu] Link Link Link Link Link
Bootstrap defaults however don't provide desired result.
<nav class="navbar navbar-expand-md navbar-light bg-light main-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100">
<ul class="nav navbar-nav w-100">
<li class="nav-item active nav-breaker">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Haircare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item nav-breaker">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Appointment</a>
</li>
</ul>
</div>
<a class="navbar-brand order-first order-md-0 mx-0" href="#">Shear Success</a>
<div class="collapse navbar-collapse w-100">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
The short answer is that changing bootstrap's default navbar animations is not easy.However, I got you most of the way there: https://www.codeply.com/go/1VhJAMNHEO
your markup is not boostrap-compliant. fix your html so that you follow boostrap standards outlined here. See the section labeled "With a toggler on the left... "
remove the navbar-expand-md class from the nav to make the menu collapsed by default
override bootstrap's default styling to achieve the desired "slide in from the left" effect. this is much easier said than done. in particular the navbar adds a temporary class .collapsing that is easy to miss.
this is going to mess up responsive styling and will require more attention i.e. media queries.
honestly, if you want the navbar to do anything besides what's listed out on the documentation, I've found it easier to write most of my own styling and scripting from scratch, leveraging only the basic .navbar and .navbar-nav etc classes for styling
I created content area for jquery tabs.With block that contains TAB name and Tab content. The sturcture is like below
<div id="tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active" role="presentation">
<a aria-controls="home" data-toggle="tab" href="#home" role="tab">INTRODUCTION</a>
</li>
<li role="presentation">
<a aria-controls="profile" data-toggle="tab" href="#profile" role="tab">OUR HOLIDAYS TO ITALY</a>
</li>
<li role="presentation">
<a aria-controls="messages" data-toggle="tab" href="#messages" role="tab">ABOUT ITALIAN EXPRESSION</a>
</li>
<li role="presentation">
<a aria-controls="settings" data-toggle="tab" href="#settings" role="tab">ITALY HOLIDAY HIGHLIGHTS</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabgrey">
<div class="tab-pane fade in active country_content" id="home" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="profile" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="messages" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="settings" role="tabpanel">asdsadsad</div>
</div>
</div>
If I try to render this structure through view of a block. I can't emulate it.
Since I have to put all li's inside one ul and all divs inside tab-content.
I would suggest to not render this with #Html.PropertyFor(), not with that markup anyway. Because you would end up with a lot of display templates and helper methods. Create a view model instead where everything is already put together nicely. Then loop through your view model twice, one time for the unordered list and then for every tab pane.
Basically there are 2 pages with me :-
Index page
<div class="box-footer text-center">
View my Groups
</div>
MyGroups.html
<ul class="nav nav-tabs pull-right ui-sortable-handle">
<li class=""><a id="clickSearch" data-toggle="tab" href="#search" aria-expanded="false">Search</a></li>
<li class=""><a data-toggle="tab" href="#sent" aria-expanded="false">My Groups</a></li>
<li class="active"><a data-toggle="tab" href="#all" aria-expanded="true">All Groups</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Groups</li>
</ul>
<div id="sent" class=" tab-pane">
//some content
</div>
Now how can user be redirected from HTML page 1 on clicking " View my groups" to the #sent div on another Html page ?
Things seacrhed :- Using jquery .click() function
But Need proper guidance in syntax .
Had a look on this , got the basic idea but still not able to achieve what's needed .
You can link directly from the href of the first page
View my Groups
adding the #sent to the link will automatically scroll to the appropriate div
I have a menu which is included in file A and B. I don't want any of my tabs to be active at first but after clicking on them I want to set the correct list item's class="active". I thought that the code below would do it. What do I need to add or change?
<ul id="navbar_menu" class="nav nav-tabs">
<li><a data-toggle="tab" href="#">A</a></li>
<li><a data-toggle="tab" href="#">B</a></li>
</ul>
FYI: I have included the following for the HTML page (do I need anything more than this):
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
http://getbootstrap.com/javascript/#tabs
According to Bootstrap's documentation (under the title "Markup"), you are still missing some HTML.
So this is mostly right, except we need the a link's href to point to an id of your actual tab, and not just a hash mark #.
<ul id="navbar_menu" class="nav nav-tabs">
<li><a data-toggle="tab" href="#tab1">A</a></li>
<li><a data-toggle="tab" href="#tab2">B</a></li>
</ul>
And then we need the actual tabs to be created.
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="tab1">...</div>
<div role="tabpanel" class="tab-pane" id="tab2">...</div>
</div>
Hope it helps!