Like this, bootstrap 3:
| tab1 | tab2 | tab3 | button
<div class="row">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
<div class="btn-group pull-right">
<button class="btn btn-default navbar-btn pull-right" >123</button>
</div>
</div>
If you want to place multiple elements in a single row you can use the bootstrap grid system. For details see: http://getbootstrap.com/examples/grid/
Your code could then look like:
<div class="row">
<div class="col-xs-8">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home
</li>
<li role="presentation">Profile
</li>
<li role="presentation">Messages
</li>
</ul>
</div>
<div class="col-xs-4">
<div class="btn-group pull-right">
<button class="btn btn-default navbar-btn pull-right">123</button>
</div>
</div>
</div>
For working a example see here: https://jsfiddle.net/qmjmtx27/1/
Related
I'm having a small problem with dropdown menu and mine controller, I have on my controller the variable for the dropdown content but it dont show on the webpage only those 3 dont work {$DEN}, {$DPT} and {$DES}
Here is the HMTL
<div class="top-nav">
<nav class="navbar navbar-default">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Menu
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<img src="{$favlogo}" alt="" width="8%" height="auto">
<li class="hvr-bounce-to-bottom active">{$homebar}</li>
<li class="hvr-bounce-to-bottom">{$aboutUs}</li>
<li class="hvr-bounce-to-bottom">{$servicos}</li>
<li class="hvr-bounce-to-bottom">{$galeria}</li>
<li class="hvr-bounce-to-bottom">{$equipa}</li>
<li class="hvr-bounce-to-bottom">{$contactUs}</li>
<li class="hvr-bounce-to-bottom">{$user}</li>
<li class="hvr-bounce-to-bottom">{$login}</li>
<li class="hvr-bounce-to-bottom">{$logout}</li>
<li class="hvr-bounce-to-bottom">{$email}</li>
<li class="hvr-bounce-to-bottom">{$contacto}</li>
<li class="dropdown">
Idioma
<div class="dropdown-content">
{$DEN}
{$DPT}
{$DES}
</div>
</li>
</ul>
<div class="clearfix"> </div>
</div>
</div>
</nav>
</div>
And here is the Controller code for this part
$data['DPT'] = 'Português';
$data['DEN'] = 'English';
$data['DES'] = 'Español';
//------------------ FOOTER ----------------------
$data['footercontactUS'] = 'Contacte-nos';
$data['footeraboutUS'] = 'Sobre Nós';
return $data;
The easier way is to use the full address to the href.
In your view
Português
I'm using the default collapse navbar from bootstrap 3, but when I resize the browser window or open the page on a mobile device, the menu will first collapse and reduce nice to just the button and when I hit this button to expand the menu, all the menu items are too far on the left side so you can't read them properly an the language selection (just a flag) disappears completely. I tried several things like inline styling in html (left margin/padding, width, max width etc) and I also tried to remove the negative margin for .navbar-nav in my bootstrap css. I'll attach a screenshot and here is the code for my navigation (of course it's nested in a container div):
<div class="row formRow">
<div class="col-sm-12 searchCol">
<form class="searchBox" action="/en/search.html" method="get">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" name="q" class="form-control" maxlength="2048">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" ><!--aria-controls="navbar"-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/en/"><img class="img-responsive" src="/img/primeralogo.png" alt="Primera Technology Europe Logo"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="padding: auto; max-width: 100%;">
<li class="dropdown" style="padding: auto; max-width: 100%;">
PRODUCTS
<ul class="dropdown-menu">
<li>Slide Printer</li>
<li>Cassette Printer - Autoloader</li>
<li>Cassette Printer - Manual</li>
<li>Medical IT Equipment</li>
<li role="separator" class="divider"></li>
<li>LX500e Color Label Printer</li>
<li>Disc Publishers</li>
<li role="separator" class="divider"></li>
<li>Product Brochure</li>
<li>Portable All-in-One Printer</li>
</ul>
</li>
<li class="dropdown" style="padding: auto; max-width: 100%;">
SUPPORT
<ul class="dropdown-menu">
<li>Contact Support</li>
<li>Knowledge Base</li>
<li role="separator" class="divider"></li>
<li>Product Registration</li>
<!-- <li>Sign up for training</li>-->
<li role="separator" class="divider"></li>
<li>Slide Printer</li>
<li>Cassette Printer</li>
<li>LIS Integration</li>
</ul>
</li>
<li class="dropdown" style="padding: auto; max-width: 100%;">
COMPANY
<ul class="dropdown-menu">
<li>About Primera </li>
<li>Press</li>
<li>Contact Primera </li>
</ul>
</li>
<li class="dropdown" style="padding: auto; max-width: 100%;">
<span class="lang-sm" lang="en"></span>
<ul class="dropdown-menu"> <li><span class="lang-sm lang-lbl-full" lang="en"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="de"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fr"></span></li>
<!--<li><span class="lang-sm lang-lbl-full" lang="es"></span></li>-->
<li><span class="lang-sm lang-lbl-full" lang="nl"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="bg"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="cz"></span></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
<div class="row formRowBelow">
<div class="col-sm-12 searchCol">
<form class="searchBoxAlt" action="/en/search.html" method="get">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" name="q" class="form-control" value="" maxlength="2048">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
</div>
Screenshot of the problem
EDIT: It seems that if the window gets small enough (320px width) the navigation gets displayed almost correct. As the window gets larger, the text goes to the left and disappears "letter for letter" until it hits the breaking point where it becomes a normal navbar again
If you're using Chrome, then this is a browser bug that I've experienced as well. When moving to a different breakpoint from mobile view sometimes Chrome zooms in. Try just resetting your browser zoom level (Ctrl/Cmnd + 0).
You also have a JS error in your console that you should consider resolving.
I have about 13 items in my list, so I'd like to make my dropdown menu in ui-bootstrap have at least two columns. Right now, here is my html for the button:
<div class="btn-group" uib-dropdown keyboard-nav>
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
Graph By Indications<span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li class="nav-item" ng-repeat="item in test2" ng-click="fullIndicationFunction(item)">{{item}}</li>
</ul>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li class="nav-item" ng-repeat="item in test1" ng-click="fullIndicationFunction(item)">{{item}}</li>
</ul>
</div>
Right now, I end up with separate columns on top of each other, and I'm trying to get them beside each other. I've tried the wrapping the <ul> tags with a <div class="row">...</div>, but that just stops the dropdown from working altogether.
Here is the what the above code produces:
Using one <ul> and having both the <li> elements within columns in a <row> will create the two column list I was looking for.
<div class="btn-group" uib-dropdown uib-keyboard-nav style="border-bottom: #357ebd 3px solid; border-radius: 10px">
<button class="btn btn-primary" ng-click="clearVals()">Clear</button>
<button type="button" class="btn btn-primary">
{{ displayedIndication }}
</button>
<button type="button" class="btn btn-primary" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" style="margin-right:-120px">
<div class="row" style="padding-left:7px; padding-right:7px">
<div class="col-sm-6" style="padding-left:-7px">
<li class="nav-item" ng-repeat="item in indList" ng-click="fullIndicationFunction(item)">{{item}}</li>
</div>
<div class="col-sm-6">
<li class="nav-item" ng-repeat="item in indList2" ng-click="fullIndicationFunction(item)">{{item}}</li>
</div>
</div>
</ul>
</div>
I used inline styles just to show that there are a bit of tweaks you'll need to make to have the lists look clean and even spaced without overlapping. Heres the result:
I am using bootstrap to create a web site.
Here is the code for navbar
Edit: Fiddle http://jsfiddle.net/cb6rxu2h/
<header>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header col-md-4 col-sm-12">
<a class="navbar-brand" href="#">BargainKart</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="badge pull-right">4</span><i class="fa fa-shopping-cart"></i>
</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in"></i>
Sign in</a></li>
</ul>
</div> <!--container fluid-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>About</li>
<li class="dropdown">
Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Electronics</li>
<li>Fashion</li>
<li role="separator" class="divider"></li>
<li>All</li>
</ul>
</li>
</ul>
<div class="col-sm-6 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
</div><!-- /.navbar-collapse -->
</nav>
</header>
And the code for sidebar
<div class="wrapper">
<aside>
<div class="categories-bar content-fluid col-md-3 col-sm-12">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>About</li><li class="active">Home</li>
<li>About</li><li ">Home</li>
<li>About</li> <li>Shop</li>
</ul>
</div>
</aside>
The css I've used is
aside {
padding-bottom: 5000px;
margin-bottom: -5000px;
background-color: white;
font-size: 1.5em;
}
.wrapper {
position: relative;
overflow: hidden;
}
I've messed up a lot but still can't figure out why the sidebar and wrapper div is overlapping into header.
I can use padding but when I scale the browser there's lot of empty space for small screen browsers.
Since you use the navbar-fixed-top giving the body a padding of the navbars height should fix this problem. Replace XX with your value of the height in pixels.
body {
padding-top: XXpx;
}
You can get this tip here.
Giving up on get all collapses closed when click another collapse.
I have several collapse groups running as a multi-level menu generated by php/mysql.
Basically it works very well, except for one tiny issue.
When i click a parent element from another group, i want all other parents closed.
A full HTML copy of my running menu can be seen here : jsFiddle
HTML:
<div class="panel panel-default">
<div class="panel-heading">Categories</div>
<div id="menu" class="panel-body">
<div parentid="cPath_1" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Hardware<span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span>
</li>
<div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">CDROM Drives<a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_17" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_22" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Testcat<a class="" href="#cpath_22" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_22" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_23" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Testcat2
</li>
</div>
</div>
</div>
</div>
</div>
<div parentid="cPath_4" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Graphics Cards
</li>
</div>
<div parentid="cPath_8" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Keyboards
</li>
</div>
<div parentid="cPath_16" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Memory
</li>
</div>
<div parentid="cPath_9" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Mice
</li>
</div>
<div parentid="cPath_6" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Monitors
</li>
</div>
<div parentid="cPath_5" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Printers
</li>
</div>
<div parentid="cPath_7" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Speakers
</li>
</div>
</div>
</div>
<div parentid="cPath_2" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-info">Software<a class="collapsed" href="#cpath_2" data-toggle="collapse" data-parent="#cpath_2"><span class="toggleMe glyphicon pull-right glyphicon-chevron-right"></span></a>
</li>
<div id="cpath_2" class="list-group collapse" style="margin-bottom: -2px; height: 0px;">
<div parentid="cPath_19" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Action
</li>
</div>
<div parentid="cPath_18" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Simulation
</li>
</div>
<div parentid="cPath_20" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Strategy
</li>
</div>
</div>
</div>
<div parentid="cPath_3" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-info">DVD Movies<span class="toggleMe glyphicon glyphicon-chevron-right pull-right"></span>
</li>
<div id="cpath_3" class="list-group collapse" style="margin-bottom: -2px;">
<div parentid="cPath_10" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Action
</li>
</div>
<div parentid="cPath_13" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Cartoons
</li>
</div>
<div parentid="cPath_12" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Comedy
</li>
</div>
<div parentid="cPath_15" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Drama
</li>
</div>
<div parentid="cPath_11" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Science Fiction
</li>
</div>
<div parentid="cPath_14" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Thriller
</li>
</div>
</div>
</div>
<div parentid="cPath_21" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Gadgets
</li>
</div>
</div>
</div>
JS:
//if click chevron's
$('.toggleMe').click(function(){
var parent = $(this).closest('.list-group').attr('parentid').split( "_" )[1];
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
$(this).closest('.list-group-item').toggleClass('list-group-item-danger list-group-item-info');
//$( '.list-group' ).not('#cpath_'+parent+'').toggle();
//alert('cPath_'+parent); //this is the required main value , all elements inside this should stay open if are open
});
on first load see all parents.
when click hardware chevron, menu expands.
But now when decide to click software , hardware stays open.
First of all, the collapsing of other panels is dependent on the DOM structure. Each panel should be wrapped in a div with the class '.panel'. You can refer the issue for more details.
Second, the data-parent attribute should refer to the element that wraps all the panels, which you want only one of them to be open.
<div id="menu" class="panel-body">
<div parentid="cPath_1" class="list-group panel" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Hardware<span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span>
</li>
<div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">CDROM Drives<a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
</div>
</div>
</div>
</div>
Here is your modified code http://jsfiddle.net/zbrhu/1/