1
I don’t know if I’m doing this correctly, but I need to create a dropdown list on my navbar to show a list of branches that will come from the database. The problem is that when I insert it, it is vertically misaligned. I believe it is because of some class that needs to be informed correctly. Someone knows how to help me?
<li>
<div class="form-group">
<label class="col-md-2 control-label">Filial Administrada</label>
<div class="col-md-3">
<select data-plugin="selectpicker" title="Selecione uma opção" class="show-tick show-menu-arrow">
<option>FILIAL 1</option>
<option>FILIAL 2</option>
<option>FILIAL 3</option>
<option>FILIAL 4</option>
</select>
</div>
</div>
</li>
<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided" data-toggle="menubar">
<span class="sr-only">Toggle navigation</span>
<span class="hamburger-bar"></span>
</button>
<button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse" data-toggle="collapse">
<i class="icon wb-more-horizontal" aria-hidden="true"></i>
</button>
<div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
<img class="navbar-brand-logo" src="../../assets/images/logo.png" title="Remark">
<span class="navbar-brand-text"> My System</span>
</div>
<button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search" data-toggle="collapse">
<span class="sr-only">Toggle Search</span>
<i class="icon wb-search" aria-hidden="true"></i>
</button>
</div>
<div class="navbar-container container-fluid">
<!-- Navbar Collapse -->
<div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
<!-- Navbar Toolbar -->
<ul class="nav navbar-toolbar">
<li class="hidden-float" id="toggleMenubar">
<a data-toggle="menubar" href="#" role="button">
<i class="icon hamburger hamburger-arrow-left">
<span class="sr-only">Toggle menubar</span>
<span class="hamburger-bar"></span>
</i>
</a>
</li>
<li class="hidden-xs" id="toggleFullscreen">
<a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
<span class="sr-only">Toggle fullscreen</span>
</a>
</li>
<li class="hidden-float">
<a class="icon wb-search" data-toggle="collapse" href="#" data-target="#site-navbar-search" role="button">
<span class="sr-only">Toggle Search</span>
</a>
</li>
<li>
<div class="form-group">
<label class="col-md-2 control-label">Filial Administrada</label>
<div class="col-md-3">
<select data-plugin="selectpicker" title="Selecione uma opção" class="show-tick show-menu-arrow">
<option>FILIAL 1</option>
<option>FILIAL 2</option>
<option>FILIAL 3</option>
<option>FILIAL 4</option>
</select>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
</ul>
@await Html.PartialAsync("_LoginPartial")
<!-- End Navbar Toolbar Right -->
</div>
<!-- End Navbar Collapse -->
<!-- Site Navbar Seach -->
<div class="collapse navbar-search-overlap" id="site-navbar-search">
<form role="search">
<div class="form-group">
<div class="input-search">
<i class="input-search-icon wb-search" aria-hidden="true"></i>
<input type="text" class="form-control" name="site-search" placeholder="Search...">
<button type="button" class="input-search-close icon wb-close" data-target="#site-navbar-search" data-toggle="collapse" aria-label="Close"></button>
</div>
</div>
</form>
</div>
<!-- End Site Navbar Seach -->
</div>
</nav>
See if this CSS solves:
select[data-plugin='selectpicker']{
 transform: translateY(-50%);
 top: 50%;
 position: relative;
}
– Sam
I insert in <select> tag, but it didn’t work...
– Master JR
Jalber put your CSS in too. I tried a test here with Bootstrap3, but the layout is nowhere near what’s in your image... I believe it’s because of the lack of CSS
– hugocsl
The file is a bit large, so you can download it here: https://onedrive.live.com/? id=40838E65B9F8787E%21120&Cid=40838E65B9F8787E
– Master JR