How do I set the default tab to be 'active' or 'viewed'?
As far as I understand the code below should set the 'add user' as the active tab and display the content in #addUser upon page load but not in my case. The add user tab is not displayed and I have to click on the other tabs and back at the add user tab again to see the content. Am I missing something? Most of my research returns me to set a class as active but still isn't working for me.
<li role="presentation" class="active">
<a href="#addUser" role="tab" data-toggle="tab">
<i class="fa fa-plus"></i> Add User
</a>
</li>
Here's the code for the creation of the tabview.
<div class="content-body">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#addUser" role="tab" data-toggle="tab">
<i class="fa fa-plus"></i> Add User
</a>
</li>
<li role="presentation">
<a href="#rUser" role="tablist" data-toggle="tab">
<i class="fa fa-minus"></i> Remove User
</a>
</li>
<li role="presentation">
<a href="#eUser" role="tab" data-toggle="tab">
<i class="fa fa-pencil-square-o"></i> Edit User
</a>
</li>
</div>
based on this the only thing i see is that you forgot to close your ul tag at the end.
Related
I have a Meteor 1.8.1 app that uses Dropdown from Bootstrap 3.3.7. I have the following html on my navbar
<ul class="nav navbar-nav" id="headerNav">
<li class="active">
<a href="/liveView">
<div class="icon-wrapper">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
</div>
Live View
</a></li>
<li class="">
<a href="/broadcast">
<div class="icon-wrapper">
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
</div>
Broadcast
</a></li>
<li><a class="btnSwitchPlace" href="/">
<div class="icon-wrapper">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
<span class="badge">1</span>
</div>
<span>Channels</span>
</a></li>
<li class="user-menu dropdown">
<a id="display-name-link" href="#user-menu" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
<span class="icon-wrapper">
<i class="glyphicon glyphicon-user"></i>
</span>
{{displayName}}<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a class="btnAgencyInfo" href="/agency">Agency</a></li>
<li>Create Channel</li>
<li class="divider"></li>
<li>Sign out</li>
</ul>
</li>
</ul>
On every browser but IE (tested on IE11) the dropdown opens as expected. On IE, the browser redirects to www.url.com/#user-menu
If I execute from console $('display-name-link').trigger('click') the dropdown opens and the bug doesn't trigger.
{{displayName}} was causing the component to re-render, since it first returns 'not-logged-in' and then, after the login is performed, it returns the actual name. This somehow causes bootstrap not to reload the events handling the dropdown and the anchor tag executes as it would normally.
Fix was just to add a e.preventDefault on the display-name-link click event handler.
$('#display-name-link').click(function(e){
e.preventDefault()
})
I am using materialize collapsible for my navigation. Everything works fine except when I reload the page. The collapsible gets closed and I have to manually make it active again. How do I make the collapsible remain active on page reload?
Here's my code:
<ul id="slide-out" class="side-nav fixed leftside-navigation">
<ul class="collapsible" data-collapsible="expandable">
<li>
<a class="collapsible-header">
<i class="material-icons">home</i> Home
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="protect" ui-sref-opts="{reload: true}">
<i class="material-icons">dashboard</i> Dashboard
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="store" ui-sref-opts="{reload: true}">
<i class="material-icons">cloud_done</i> Storage
</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header">
<i class="material-icons">event_available</i>Manage
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="manage" ui-sref-opts="{reload: true}">
<i class="material-icons">storage</i> Manage Storage
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="enroll" ui-sref-opts="{reload: true}">
<i class="material-icons">file_download</i> Enroll
</a>
</li>
</ul>
</div>
</li>
</ul>
</ul>
What you want to do concerns program state, hence there's no way for you to do that unless you save the name or id of the active accordion. which can easily be done using browser local storage.
I m trying to open sidebar option in right side using bootstrap4 Vue but it's not working
here is my HTML
<li class="nav-item nav-dropdown open" disabled="disabled">
<div class="nav-link nav-dropdown-toggle">
<i class="fa fa-cart-arrow-down"></i>Product
</div>
<ul class="nav-dropdown-items">
<li class="nav-item">
<div>
<a href="#/product/Addproduct" class="nav-link">
<i class="fa fa-circle-thin"></i>Addproduct</a>
</div>
</li>
<li class="nav-item">
<div>
<a href="#/product/Listproduct" class="nav-link">
<i class="fa fa-circle-thin"></i>Listproduct</a>
</div>
</li>
</ul>
</li>
i want Addproduct & listProduct in right side instead of down
I tried to use dropdown right but it stops working any ideas what i m doing wrong.
I don't know what version are you using but just check the docs for pull-right and replace your default classes with the classes for right side.
Basically what happens is when I load my page and then drop down either my outer collapsible menu (the .admin) or the nested collapsible menu (.unitsofstudy), it does not update the glyphicon I have set using the :after selector unless I toggle it twice.
Would anyone be able to take a look and see if they can spot where I have screwed this up; I have been at this for a few hours now trying to fix but with no success. If any more info is needed let me know.
HTML:
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<ul class="nav menu" id="navmenu-sidebar">
<!-- Admin dropdown -->
<li>
<a class="admin" data-toggle="collapse" href="#admin"><i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin</a>
<ul id="admin" class="nav collapse">
<li>
<a class="unitsofstudy" data-toggle="collapse" href="#unitsofstudy"> <i class="fa fa-book" style="margin-right: 12px;"></i>Units of Study</a>
<ul id="unitsofstudy" class="nav collapse">
<li>
<i class="fa fa-book" style="margin-right: 8px;"></i> View Units
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Create Unit Offerings
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Register Units
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Register Semesters
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
My CSS:
.admin:after, .unitsofstudy:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.admin.collapsed:after, .unitsofstudy.collapsed:after {
content: "\e080";
}
You need to give your anchors an initial class of .collapsed
<li>
<a class="admin collapsed" data-toggle="collapse" href="#admin">
<i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin
</a>
</li>
So class both admin and unitsofstudy to let bootstrap know the initial state of the menu is collapsed
Working example
http://codepen.io/jcoulterdesign/pen/6443069430f54e0b635e726c2cb9da02
I'm a bit stumped with a problem with the bootstrap.ui module for AngularJS.
This is my HTML:
<nav id="sidebar">
<ul id="main-nav" class="open-active">
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/vernerunde">
<i class="fa fa-th-list"></i>
Ny Vernerunde
</a>
</li>
<li>
<a href="#/interaksjon">
<i class="fa fa-gears"></i>
Ny Interaksjon
</a>
</li>
<li>
<a href="#/brukerstyring">
<i class="fa fa-user"></i>
Brukerstyring
</a>
</li>
</ul>
</li>
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-search"></i>
Lister
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/list">
<i class="fa fa-desktop"></i>
Alle
</a>
</li>
</ul>
</li>
</ul>
</nav>
And this is the controller responsible for the isCollapsed model:
controllers.controller('CollapseCtrl', function ($scope) {
$scope.isCollapsed = false;
});
I've also made a small gif which I'm going to throw in that shows my actual problem. Now, I'm not too sure whether or not it's present in the gif, but it seems if I click the first element in the list, it works. Then when that first element has been toggled, and I click the element underneath, it totally breaks apart.
EDIT1:
Okay, I changed the directive from ng-show="" to collapse="", still using "isCollapsed". Now it's working, but the height of the box that's collapsed is too small.
Though I don't have much insight into the problem I strongly suspect that the issue is in here:
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
Mind that the ng-click is executed once , but once a variable changes, the scope lifecycle will recalculate the scope several times. And once a variable which depends on isCollapsed will change, the scope is re-calculated again, and so forth. This might explain the unusual openings and closings of the title panes. Although I don't see exactly why isCollapse is recalculated.
Solution: Move it as a method inside the controller.