Could you help me stylize buttons to look like a standard dropdown link?
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li>Dropdown Link
</li>
<li>
<form>
<button class="btn btn-link">Dropdown Button</a>
</form>
</li>
</ul>
</div>
jsFiddle
Add this to your CSS:
.dropdown-menu form button {
border:0;
padding: 3px 20px;
color: #333;
width:100%;
text-align:left;
}
.dropdown-menu form button:hover {
color:black;
text-decoration:none;
background-color:#f5f5f5;
}
It will look like a standard link.
Related
I'm trying to fix an issue where my <ul> list does not wrap / break correctly on small displays. I have my navbar show "Test Tools" then <ul>. However on small displays it will only show "Test Tools" on one line, then put the entire <ul> on the next line. Then the <ul> wraps onto another line below it (3 lines total).
Current Behavior
LINE 0: "Test Tools"
LINE 1: <ul> line one
LINE 2: <ul> continues on third line
Desired Behavior
LINE 0: "Test Tools" <ul> line one
LINE 1: <ul> continues on second line
ISSUE
Here's what my navbar looks like at a good width (no wrapping):
When you resize your window to be smaller, the wrapping works not as expected. It only shows "Test Tools" on one entire line by itself:
Then you can use the scrollbar on the right to go down a line to see the button list:
What I want: I want "Test Tools" to show, then as many buttons as possible should come next on the same line (similar to the first image). Any buttons that don't fit should be shown on the next line (visible by using the scrollbar on the right).
CODE
Fiddle - https://jsfiddle.net/ksissons/Leh7r53m/18/
.toolsBar .navbar-default {
margin-bottom: 0px;
border-color: #e7e7e7;
border-radius: 4px;
position: relative;
min-height: 40px;
height: 40px;
line-height: 1.42857143;
color: #333;
overflow: overlay;
}
.toolsBar .navbar .nav {
position: relative;
left: 0;
display: list-item;
float: left;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
.toolsBar .navbar-brand {
float: left;
height: 40px;
padding: 0px 12px;
font-size: 16px;
line-height: 40px;
}
#toolBarList {
overflow: overlay;
}
.toolsBar .navbar-brand {
position: relative;
z-index: 2;
}
.toolsBar .navbar-default .navbar-brand {
color: white;
}
#toolsBar .navbar-default {
background-color: #566b7f;
}
<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.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid toolsBar" id="toolsBar">
<div class="navbar navbar-default">
<div class="navbar-header">
<span class="navbar-brand">Test Tools</span>
</div>
<div>
<ul class="nav navbar-nav" id="toolBarList">
<li>
<a class="btn btn-default btn-outline btn-circle">Test Readiness Status</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Run Detective Tool</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Go to Confluence</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">How to Update mp3 Files</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Generate & View Report</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Show Configuration Variables</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Edit Configuration Variables</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Update Content Automatically</a>
</li>
</ul>
</div>
</div>
</div>
Can you put your .navbar-header in the nav list?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid toolsBar" id="toolsBar">
<div class="navbar navbar-default">
<ul class="nav navbar-nav" id="toolBarList" style="overflow: overlay;">
<li>
<div class="navbar-header">
<span class="navbar-brand">Test Tools</span>
</div>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Test Readiness Status</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Run Detective Tool</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Go to Confluence</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">How to Update mp3 Files</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Generate & View Report</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Show Configuration Variables</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Edit Configuration Variables</a>
</li>
<li>
<a class="btn btn-default btn-outline btn-circle">Update Content Automatically</a>
</li>
</ul>
</div>
</div>
I am trying to build bootstrap dropdown in which submenu can be expandable on click, I have snapshot attached with this question please check, I am not able to find anything like this on google so I am posting this question. Can anyone please provide me working css or jsfiddle for this? Here's what I've tried so far... (fiddle)
[]
.dropdown-menu li {
border-bottom: 1px dashed #ccc;
}
.dropdown-menu li:last-child {
border: 0;
}
.dropdown-menu li i {
padding-left: 10px;
}
.dropdown-menu li a {
display: -webkit-inline-box;
padding-left: 0px;
}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Export
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<i class="fa fa-chevron-down"></i>
<a href="#">
<i class="fa fa-file-excel-o"></i> Excel
</a>
</li>
<li>
<i class="fa fa-chevron-down"></i>
<a href="#">
<i class="fa fa-file-word-o"></i> Word</a>
</li>
<li>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-file-o"></i> JSON
</li>
</ul>
</div>
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'm trying to extend this custom component example http://getbootstrap.com/examples/cover/ by adding appropriate style to dropdown element.
<li class="dropdown masthead-dropdown">
<a class="" data-toggle="dropdown" href="#">Media<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Videos</li>
<li>Pictures</li>
</ul>
</li>
CSS:
.masthead-dropdown{
background-color: transparent !important;
border-color:white !important;}
Custom styles are included after bootstrap.css, but they doesn't work.
Going by the Cover menu list, I used it to guess the part of your code since I don't know what is wrapping the <li>:
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li><ul class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Media
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Videos</li>
<li>Pictures</li>
</ul>
</ul></li>
</ul>
</nav>
</div>
</div>
Then add to your CSS:
.dropdown-toggle {
background-color: transparent;
border-color: #fff;
border-style: solid;
border-top: none;
border-right: none;
border-left: none;
}
And you can change the dropdown background colors with this:
.dropdown-menu{
background-color: #000;
}
And the links font color:
.dropdown-menu>li>a{
color: #fff;
}
JSFiddle
I have a aside which is of 260px width. when i try to place my user-icon and name info, there is too much of right-margin.
<div class="rightBox pull-right" href="#">
<ul class="navbar-nav navbar-right">
<li class="dropdown">
<li style="margin-top: 3px">
<i class="fa fa-2x fa-border fa-user"></i>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px;margin-left:0;">
<strong><h4>
<span>Karl Cadigan</span>
<b class="glyphicon glyphicon-chevron-down"></b>
</h4></strong>
</label>
</a>
</ul>
</div>
Below is my fiddle. I want to bring the user-icon and the user-name to left leaving the drop-down icon at right.
http://jsbin.com/kugudaho/6/edit
Add the following class in your CSS. Use display:inline-block to show the info next to each other.
ul.navbar-nav
{
position:relative;
}
ul.navbar-nav li {
list-style: none;
display:inline-block;
}
.glyphicon{position:absolute; right:15px; top:15px;}
DEMO
If I understand it right this is what you need
HTML Markup
<div class="rightBox" href="#">
<ul class="navbar-nav">
<li class="dropdown">
<li style="margin-top: 3px">
<i class="fa fa-2x fa-border fa-user"></i>
</li>
<li class="glyph">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px;margin-left:0;">
<strong><h4>
<span>Frank</span>
<b class="glyphicon glyphicon-chevron-down"></b>
</h4></strong>
</label>
</a>
</ul>
</div>
CSS
i {
list-style: none;
}
.rightBox{ height: 60px; width:260px; border:1px dashed red; }
.fa-user {
position: relative;
background: #666666;
}
.fa-user:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent #89cd17 transparent transparent;
}
.navbar-nav li.glyph {
float: right !important;
}
.navbar-nav {
float: inherit;
padding-left: 10px;
}
I hope I understood what you need.
I think you're better off starting with a standard Bootstrap dropdown, and customizing where needed. Uses a lot less custom CSS (if any) and is easier to maintain...
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-2x fa-border fa-user"></i> <!-- put this inside the a element to bind it to the text -->
Frank
<span class="glyphicon glyphicon-chevron-down"></span> <!-- bootstrap used the class "caret" to designate a dropdown, but you can change it with a glyphicon if you need to -->
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
</ul>
</div>
Example:http://www.bootply.com/f9WYqJqLmd