I made a dropdown-menu. As you can see it is scrollable because of the overflow-x:hidden.
In IE9 it works as expected. But when I try it in Chrome, you can scroll till the bottom, and if you scroll a few times more to the bottom, the list will hang for a second and scrolls only then to the top.
<div class="btn-group" style="width:100%">
<ul class="dropdown-menu"
style="display: inherit; max-height: 200px;width:100%;overflow-x:hidden;">
<li>
<a>Item 1</a>
</li>
<li>
<a>Item 2</a>
</li>
<li>
<a>Item 3</a>
</li>
<li>
<a>Item 4</a>
</li>
<li>
<a>Item 5</a>
</li>
<li>
<a>Item 6</a>
</li>
<li>
<a>Item 7</a>
</li>
<li>
<a>Item 8</a>
</li>
<li>
<a>Item 9</a>
</li>
</ul>
</div>
http://plnkr.co/edit/vwCIau4STpJjWkVJxcar
This bug is confirmed and assigned in Chrome. Thereby closing this question.
https://bugs.chromium.org/p/chromium/issues/detail?id=828751
Related
I would like to collapse the submenus within my dropdown. In this example, under General Management, the links under User Admin - is it possible to collapse/toggle that div? Effectively I would want a submenu that was directly under (vertically) but I can't figure that out either - Anything I do creates a pop-out menu to the right while I would like to keep it in the same vertical space. I hope that makes sense.
Thanks in advance for your help!
.navFont {
font-size: 12px !important;
}
.navHeader {
font-size: 12px !important;
font-weight: bold !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="m-4">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!---<div class="container-fluid">--->
<a class="nav-link navFont" aria-current="page" href="#">Home</a>
<a class="nav-link navFont" aria-current="page" href="#">Committee Reviews</a>
<!---Admin --->
<div class="dropdown">
Admin
<ul class="dropdown-menu">
<!---<li><h5 class="dropdown-header">Dropdown header 1</h5></li>--->
<li><a class="dropdown-item navFont" href="#">IRB Studies</a></li>
<li><a class="dropdown-item navFont" href="#">Waiting Triage</a></li>
<li><a class="dropdown-item navFont" href="#">Waiting Full Board Review</a></li>
<!---<li><h5 class="dropdown-header">Dropdown header 2</h5></li>--->
<li><a class="dropdown-item navFont" href="#">Waiting Not Full Board Review</a></li>
</ul>
</div>
<!--- End Admin--->
<!---Reporting --->
<div class="dropdown">
Reporting
<ul class="dropdown-menu">
<li><a class="dropdown-item navFont" href="#">Run Reports</a></li>
<li><a class="dropdown-item navFont" href="#">Manage Reports</a></li>
<li><a class="dropdown-item navFont" href="#">New Reports (11/18/2020)</a></li>
</ul>
</div>
<!--- End Reporting--->
<!--- General Management--->
<div class="dropdown">
General Management
<ul class="dropdown-menu">
<!--<li><h5 class="dropdown-header">Dropdown header 1</h5></li>--->
<li><a class="dropdown-item navFont" href="#">Manage Submissions</a></li>
<li><a class="dropdown-item navFont" href="#">Manage Committees</a></li>
<div class="dropdown-divider"></div>
<li><h5 class="dropdown-header navHeader">Users & Admin</h5></li>
<li><a class="dropdown-item navFont" href="#">User Access</a></li>
<li><a class="dropdown-item navFont" href="#">IRB Admin</a></li>
<div class="dropdown-divider"></div>
<li><h5 class="dropdown-header navHeader">Letters & Templates</h5></li>
</ul>
</div>
<!--- End General Management--->
<!---</div>--->
</nav>
</div>
Code
I have a reactJS application which incorporates navbar for navigation. The initial view shows the 3 line menu icon in the top right hand corner which is what I want. It looks like this:
When I click on the menu icon, the drop down appears like this:
I am trying to get the dropdown to align the menu items to the right, not to the left. This is the code that generates the navbar:
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav pullRight">
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.accountinformation}>Basic Account Information</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.contributions}>Contributions</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.investmentelections}>Investment Elections</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.beneficiary}>Beneficiary Information</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.transfer}>Transfers</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.loans}>Loans</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.transactionhistory}>Transaction History</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.documents}>Documents</a>
</li>
<li class="active">
<a className="nav-link menuItemColor" onClick={this.logout}>Logout</a>
</li>
</ul>
</div>
I thought putting the pullRight in the classname would pull the items to the right. I guess not.
Any suggestions?
Thank you.
I am trying to get the dropdown to align the menu items to the right,
not to the left.
You can use flexbox to achieve that layout.
Something like this should work:
.pullRight .nav-item {
display: flex;
justify-content: flex-end;
}
I would like to have the label for the dropdown next to the dropdown menus.
Find below how my current example looks like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Order: </li>
<li role="presentation" class="dropdown">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
Any suggestions how to align the label with the dropdown properly?
Thx in advance!
I'm not sure I understand correctly, but for alignment I would use a flexbox.
.nav-pills {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Order: </li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Ticker
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
Just add the below css in your custom css file
.nav-pills>li:not(.dropdown) {
padding: 10px 12px;
}
.nav-pills>li:not(.dropdown) {
padding: 10px 12px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Order: </li>
<li role="presentation" class="dropdown">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
You can simply add padding like this :
/* Optional theme */
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
ul.nav > li:first-child {
padding:10px 5px;
}
<ul class="nav nav-pills" role="tablist">
<li role="presentation" >Order: </li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Ticker
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
Use Flex to nav pills
.nav-pills{
display:flex;
align-items:center;
}
JS FIDDLE: https://jsfiddle.net/pradeep0594/qfwngj5x/1/ for your reference
I like Gerard's display: flex solution better, but just in case anyone prefers to maintain the original display property, here is an example using only line-height to vertically center both .nav-pills.
<style>
.nav-pills > li {
line-height: 40px;
}
.nav.nav-pills > li > a {
/* removes top & bottom padding */
padding: 0 15px;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Order: </li>
<li role="presentation" class="dropdown">
Ticker<span class="caret"></span>
<ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
Open the following bootstrap theme in full page mode:
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav?p=preview
on the nav bar you will see six options:
Three are font-awesome icons and the other three are text "About, Download and Contact".
What I am trying to achieve is to place the font-aweome icons in the center of the navbar instead of towards the right.
I have tried various options, like placing them in etc.. but all that results in something or the other breaking.
<ul class="nav navbar-nav nav-advance-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
<a class="page-scroll" href="#flax"><i class="fa fa-leaf"></i></a>
</li>
<li>
<a class="page-scroll" href="#moist"><i class="fa fa-heart"></i></a>
</li>
<li>
<a class="page-scroll" href="#designs"><i class="fa fa-paw"></i></a>
</li>
</ul>
<ul class="nav navbar-nav nav-basic-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
I'm trying to achieve a 6 column fluid layout, like so:
<ul class="list">
<li class="list-element first">
<a>Item 1</a>
</li>
<li class="list-element">
<a>Item 2</a>
</li>
<li class="list-element">
<a>Item 3</a>
</li>
<li class="list-element">
<a>Item 4</a>
</li>
<li class="list-element">
<a>Item 5</a>
</li>
<li class="list-element last">
<a>Item 6</a>
</li>
</ul>
My list should be 100% width and every list element LINK (ul li a) should fit equally into it. Did some research and didn't find any 6 column fluid layout to match my request (or I'm just too tired to see it).
Any oppinion?
TIA
Use the css float on the li and a width of 16.66666666666667% this means 100/6.
here is a sample css. and a fiddle
.list {
list-style: none;
margin: 0;
padding: 0;
}
.list li {
width: 16.66666666666667%;
float: left;
}
.list li a {
display: block;
border: 1px solid #ddd;
text-align: center;
}
<ul class="list">
<li class="list-element first">
<a>Item 1</a>
</li>
<li class="list-element">
<a>Item 2</a>
</li>
<li class="list-element">
<a>Item 3</a>
</li>
<li class="list-element">
<a>Item 4</a>
</li>
<li class="list-element">
<a>Item 5</a>
</li>
<li class="list-element last">
<a>Item 6</a>
</li>
</ul>