I'm pretty new to bootstrap(using 3.3.7 version) and css and need to do some front-end editing of existing code.
I got the following code:
<nav class="navbar navbar-default">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Fields
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul>
<li style="list-style-type: none" ng-repeat="fieldObj in vm.gridOptions.columnDefs">
<input type="checkbox" ng-model="fieldObj.visible"> {{fieldObj.field}}
</li>
<li style="list-style-type: none">
<button ng-click="vm.refreshGrid()">OK</button>
</li>
</ul>
</div>
</div></nav>
which results with the following :
Can I control the white space surrounding the list elements ?
Thanks
You need to reset ul which by default takes browser specific styles
ul{
padding-left: 0;
}
Use
.dropdown-menu ul{
padding-left:3px;
}
instead the default padding-left:40px;
.dropdown-menu ul{
padding-left:3px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Fields
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul>
<li style="list-style-type: none">
<input type="checkbox" ng-model="fieldObj.visible"> no
</li>
<li style="list-style-type: none">
<input type="checkbox" ng-model="fieldObj.visible"> yes
</li>
<li style="list-style-type: none">
<button ng-click="vm.refreshGrid()">OK</button>
</li>
</ul>
</div>
</div></nav>
Related
Whenever a dropdown item is clicked its color changes to white that makes the white text unreadable.
I've already tried this but the solution doesn't work for me. Here is my snippet
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Demo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Applications<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
<li>Communications</li>
<li>Environmental</li>
<li>General</li>
<li>Programmable</li>
</ul>
</li>
<li>Product Selector</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" style="background-color:#000;margin-top:15px; border-radius: 0">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" style="background-color:#000;margin-top:15px;border-radius: 0"><i class="glyphicon glyphicon-search" style="color:#fff;"></i></button>
</div>
</div>
</form>
</li>
<li><i class="glyphicon glyphicon-shopping-cart logo-small"></i></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-user logo-small"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a asp-area="Identity" asp-page="/Account/Login">Login</a></li>
<li><a asp-area="Identity" asp-page="/Account/Register">Register</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I want the background of the active selection to be the same color as the dropdown item background. Thanks in advance!
This is the relevant selector.
Change it to whichever color you need. Updated example
.dropdown-menu > li > a:focus {
background-color: initial; /* Equivalent to background-color: transparent */
}
Bootstrap applies focus classes. You will need to override those as well.
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
/* Your styles here. */
}
But you've done it with the following CSS selector, .nav.navbar-nav li a:hover. Add to the selector you already have (if you want the same styles for hover and focus) for :focus.
.nav.navbar-nav li a:hover,
.nav.navbar-nav li a:focus {
/* Your existing styles. */
}
FWIW, the link to the other StackOverflow post you have is related to the Navbar, not Dropdowns.
I have the following template so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href=""><img src="images/Evaluate_Pharma_Logo_220.png" /></a>
</div>
<div class="clear-fix"></div>
<div class="navbar-collapse collapse">
<ul class='nav navbar-nav'>
<li>
<a href="">
<input type="text" /><span class="fa fa-search big"> </span> SEARCH
</a>
</li>
<li>
<a href="">
<span class=""></span>BROWSE DATA
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
CREATE REPORT
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Company & Country Profiles</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
PEER GROUPS
<span class="caret"></span>
</a>
<ul class="dropdown-menu"></ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
YOUR EVALUATION
<span class="caret"></span>
</a>
<ul class="dropdown-menu"></ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
When I run this I obtain my menu as expected, but when I reduce the width of the page my navbar toggle button class appear to the right of navbar-brand. I need this to be to the left of this, how can I make that happen? This is just the shell, I know I need to fill in my hrefs and other stuff
bootstrap floats it right, so you would override it with:
.navbar-toggle {
float: left !important;
}
note: using "!important" is not best practice, so alternatively add a new id selector to the same button element as .navbar-toggle, and add the same property and value.
I have an un-ordered list <ul> that needs to have a fixed height.
Each item in the list is associated with a Bootstrap dropdown menu
to be opened by a button (...) on each <li> item.
The dropdown menu appears correctly for the first few items.
However, as soon as I scroll down the list and click the ... button,
the dropdown menu would be shown off-screen.
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="my-list">
<ul>
<li>
<span>Item 1</span>
<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>Edit</a></li>
</ul>
</li>
<li>
<span>Item 2</span>
<button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>Edit</a></li>
</ul>
</li>
<li>
<span>Item 3</span>
<button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>Edit</a></li>
</ul>
</li>
<li>
<span>Item 4</span>
<button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>Edit</a></li>
</ul>
</li>
</ul>
</div>
style.css
.dropdown-menu {
top: auto;
}
.my-list {
height: 160px;
background-color: rgb(179, 229, 252);
padding-left: 1px;
padding-top: 3px;
padding-bottom: 0;
overflow: auto; /* Enable scrollbar for the list */
}
.my-list li {
list-style-type: none;
padding: 8px 4px 8px 8px;
border-width: thin;
border-bottom-style: solid;
border-bottom-color: rgb(208, 208, 208);
}
Question:
How can I make the dropdown menu appear directly below (*) the "..." button?
(*) Or appear directly above in the case of last item on the list.
Is this the effect that you're looking for?
<div class="my-list">
<ul class= "nav">
<li>
<span>Item 1</span>
<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu">
<li><a>Edit</a></li>
</ul>
</li>
Set the overflow to overflow: visible; needs to be "nav", and class="dropdown-menu dropdown-menu"
I realize this question has answers that have worked for some but try as I may, I cannot remove this annoying border.
I have tried the following CSS:
.nav-container{
border-width:0;
box-shadow:none;
background-color: aliceblue;
}
.navbar {
background-color: #99ccff;
border: 0;
}
Although the background-color does get set, the border remains.
Here is the site.
index.html:
html,
body {
background-color: aliceblue;
}
.nav-container {
border-width: 0;
box-shadow: none;
background-color: aliceblue;
}
.navbar {
background-color: #99ccff;
border: 0;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid nav-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="display: inline-block">
<a class="navbar-brand" href="#">
<img id="logo" src="img/writers-tryst-logo-min.png" alt="logo" />
</a>
<br/>
<br/>
<div id="shares" class="row">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title)
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon" title="stumble-upon">
<i class="fa fa-stumbleupon-circle"></i>
</a> -->
<!-- Reddit (url, title)
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit" title="reddit">
<i class="fa fa-reddit-square"></i>
</a> -->
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<!--navbar-header-->
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a>
</li>
<li> Writers
</li>
<li> Enablers
</li>
<li> About
</li>
<li> Privacy/Rules
</li>
<li> Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a>
</li>
<li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a>
</li>
<li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom">
<button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span>
</button>
</a>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link">
<li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a>
</li>
<li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a>
</li>
<li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a>
</li>
<li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a>
</li>
</ul>
</li>
<li>
<a id="reset-pwd-link" href="#reset-pwd"></a>
</li>
</ul>
</div>
<!--navbar-collapse-->
</div>
<!--container fluid-->
</nav>
</header>
<div>
<div id="message" class="alert m-t-10 m-b-10"></div>
<div id="main" class="content container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
<footer class="panel panel-default panel-transparent">
<div id="footer" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
There is a box shadow added by the bootstrap theme. The following rules will remove it as well as on the .navbar-collapse class when the nav is under 768px.
Note: you have a stray tag after the fa fa-user button and are (possibly) using normalize.css twice since Bootstrap3 uses a version of it all ready. See normalize.less.
.navbar.navbar-default {
background-color: #99ccff;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar.navbar-default .navbar-collapse {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
Before with box-shadow:
After removing the box-shadow:
Working Example:
/*FOR DEMO ONLY*/
html,
body {
background: aliceblue;
}
/*FOR DEMO ONLY*/
.nav-container {
border-width: 0;
box-shadow: none;
background-color: aliceblue;
}
.navbar.navbar-default {
background-color: #99ccff;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar.navbar-default .navbar-collapse {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid nav-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="display: inline-block">
<a class="navbar-brand" href="#">
<img id="logo" src="https://writers-tryst.com//img/writers-tryst-logo-min.png" alt="logo" />
</a>
<br/>
<br/>
<div id="shares" class="row">
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a>
</li>
<li> Writers
</li>
<li> Enablers
</li>
<li> About
</li>
<li> Privacy/Rules
</li>
<li> Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a>
</li>
<li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a>
</li>
<li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom">
<button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link">
<li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a>
</li>
<li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a>
</li>
<li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a>
</li>
<li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a>
</li>
</ul>
</li>
<li>
<a id="reset-pwd-link" href="#reset-pwd"></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div>
<div id="message" class="alert m-t-10 m-b-10"></div>
<div id="main" class="content container">
<div data-ng-view></div>
</div>
<footer class="panel panel-default panel-transparent">
<div id="footer" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
simply apply box-shadow: none; in navbar
You have several declarations for the CSS box-shadow property on the .navbar-default element. If you remove all of those the border will be gone.
The only solution that is working for me is inline css with !important property:
border: none !important; outline: none !important;
inside navbar-toggler:
<button class="navbar-toggler" style="border: none !important; outline: none !important;"
type="button" data-toggle="collapse" data-target="#collapsingNavbar">
I have created a dropdown menu but it is not working:
<div class="col-xs-6 col-md-4">
<ul id="hld" style="margin-top:10px;">
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;">
Menu
<ul class="dropdown-menu">
<li>Tom</li>
<li>Greg</li>
<li>Jane</li>
</ul>
</li>
</ul>
</div>
I am using Bootstrap CSS framework and have included all the appropriate CSS and JS files. What am I doing wrong? While looking at other questions similar to mines, I haven't been able to figure it out.
One solution may be that you are not referencing the jquery.js source before bootstrap.js source
You're missing some key elements.
This is what your dropdown element should look like.
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;">
This goes with the dropdown-toggle class.
data-toggle="dropdown" aria-expanded="false"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 col-md-4">
<ul id="hld" style="margin-top:10px;">
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;"> Menu <span class="caret"></span>
<ul class="dropdown-menu ">
<li>Tom
</li>
<li>Greg
</li>
<li>Jane
</li>
</ul>
</li>
</ul>
</div>
First mistake was a couple of quotation marks missing. On top of that, you are not following the syntax and classes listed here: http://getbootstrap.com/components/#dropdowns
Here is the correct version:
<div class="col-xs-6 col-md-4">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Menu
<span class="caret"></span>
</button>
<ul id="hld" class="dropdown-menu" style="margin-top:10px;">
<li>Tom</li>
<li>Greg</li>
<li>Jane</li>
</ul>
</div>