After much searching, I am still having trouble getting the Bootstrap dropdown to toggle and actually select items from the dropdown. The Bootstrap site says to include the .show class, but I have not had any luck with this either. Many of the examples I see here do not seem to work for me. Help, please!
This is my code:
body {
margin: 0;
padding: 0;
}
.jumbotron {
text-align: center;
width: 100%;
height: auto;
}
h2 {
font-size: 1.7em;
margin-bottom: .8em;
}
.question {
margin-top: 2em;
padding-right: 6em;
padding-left: 6em;
}
.buttonContainer {
margin: 3em;
text-align: center;
}
.button {
background-color: red;
}
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<link rel="stylesheet" type="text/css" href="public/main.css">
</head>
<body>
<div class="jumbotron">
<h1 id="header">
Post-Surgery Survey
</h1>
</div>
<div class="container question">
<h2>What kind of surgery did you have?</h2>
<div class="dropdown surgeryType">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Hip Replacement</a></li>
<li><a class="dropdown-item" href="#">Knee Replacement</a></li>
</ul>
</div>
</div>
<div class="container question">
<h2>How old are you?</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Under 50</li>
<li>50-65</li>
<li>66-80</li>
<li>Over 80</li>
</ul>
</div>
</div>
<div class="container question">
<h2>What kind of medication were you given?</h2>
<div class="checkbox">
<label><input type="checkbox" value="">Tylenol</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Celebrex</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Oxycodone</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Oxycotin</label>
</div>
</div>
<div class="container question">
<h2>Do you feel you were given enough medication?</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Too much</li>
<li>Just right</li>
<li>Not enough</li>
</ul>
</div>
</div>
<div class="container question">
<h2>How well was your pain controlled on a scale of 1-10?</h2>
<p>1 being the most pain, 10 being the least.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
<div class="container question">
<h2>Were you satisfied with your pain control?</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Yes</li>
<li>No</li>
</ul>
</div>
</div>
<div class="container">
<div class="buttonContainer">
<button type="button" class="btn btn-primary btn-lg submit">Submit</button>
</div>
</div>
</body>
</html>
It depends on what you're trying to do. Right now all your hrefs are merely anchor tags. They don't go anywhere. <li>Under 50</li>, for example. When you select an option in a dropdown, note how the page jumps a bit? That's the anchor tag being selected jumping you to the top of the same page.
If there was an actual URL, you'd go to that page. I suspect that's not what you're trying to achieve, though. This looks more like a form, in which case you probably don't want .dropdown-toggle or data-toggle="dropdown" assigned to buttons. You'd want a simple select element, no?
<select class="form-control" id="some-id">
<option>Select an option</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Related
See the image above - I have Bootstrap dropdowns on the left, and buttons on the right. They're nicely aligned, but I'd like to move the pagination up so it's in between them to make better use of the space. Now currently the pagination code is further down, but if I move it between the dropdowns and buttons, it causes what you see in the second image. How can I have everything aligned?
Bootiply here: http://www.bootply.com/5Ufnpj317Z
EDIT:
please find attached images and do changes as per red area.
I've rearranged a fair bit of your code, summarised as follows:
introduced bootstrap container and rows
removed panel-body class
removed pull-right class from the buttons on the right
added test.css for some custom adjustments
fixed indenting
It looks ok an a wide screen, but elements will stack on top of each other on smaller screens.
/*test.css*/
#dropdownMenu1-div{
display:inline;
}
#dropdownMenu2-div{
display:inline;
}
.pagination{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2 class="text-center">Browse</h2>
<hr class="no-bottom-pad">
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="dropdown inline-control" id="dropdownMenu1-div"">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Location:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>all</li>
<li class="divider"></li>
<li>London Waterloo</li>
<li>London Waterloo 3F workshop</li>
<li>London Waterloo comms room</li>
</ul>
</div>
<div class="dropdown inline-control" id="dropdownMenu2-div">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Type:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>all</li>
<li class="divider"></li>
<li>Laptop</li><li>Chromebook</li>
<li class="divider"></li>
<li>HP</li>
<li>Lenovo</li>
<li>Toshiba</li>
<li class="divider"></li>
<li>HP Brilliance 5000</li>
<li>Lenovo B50-70</li>
<li>Toshiba Portege R930</li>
</ul>
</div>
</div>
<div class="col-xs-2" id="page-numbers">
<!-- <p class="no-bottom-pad">136 laptops</p> -->
<ul class="pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="col-xs-7">
<a href="#" id="add-laptop-btn" class="btn btn-default" onclick="laptop_modal('new')">
Add Laptop
</a>
<input id="add-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50">
<a href="#" id="add-multiple-btn" class="btn btn-default less-right-pad disabled" onclick="addMultiple();">
Add Multiple ->
</a>
<input id="earmark-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50">
<a href="#" id="earmark-multiple-btn" class="btn btn-default less-right-pad disabled" onclick="addMultiple();">
Earmark Multiple ->
</a>
</div>
</div>
</div>
</body>
</html>
I'm kinda new to HTML/CSS, and I'm trying to create a page with a login dropdown, but for some reason there's no padding on the right side of it. How can I fix it?
I wasn't able to find a solution.
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header"><a class="navbar-brand">My Site</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
</div>
<div class="container">
<div class="navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li>Sign Up
</li>
<li class="divider-vertical"></li>
<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 10px;min-width:240px;">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
</div>
or
<form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal">
<input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em">
<input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
<input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
As Bootstrap Documentation says, sometimes you will need to place your dropdown container in a different position, for those cases you need to add the dropdown-menu-right class like so:
<div class="dropdown-menu dropdown-menu-right" style="padding: 10px;min-width:240px;">
Here's a JSFiddle with the example working:
JSFiddle
Your HTML structure should be changed to reflect the base Bootstrap classes. Pull-right isn't respected in the way you're using it, use navbar-right instead. Check the Docs to see the options you have by default.
*Also this class doesn't exist > <span class="glyphicon glyphicon-bar"></span>
See working example Snippet.
.navbar .dropdown-menu-fb {
padding: 10px;
min-width: 240px;
}
.navbar .navbar-toggle {
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <i class="fa fa-bars"></i>
</button>My Site
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Sign Up
</li>
<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-fb">
<li class="btn btn-default navbar-btn btn-block"> <i class="fa fa-facebook"></i> Login via Facebook
</li>
<li>
<form action="[YOUR ACTION]" method="post" role="form">
<p class="text-center">or Sign Up</p>
<div class="form-group">
<input class="form-control" id="inputEmail1" placeholder="Email" type="email">
</div>
<div class="form-group">
<input class="form-control" id="inputPassword1" placeholder="Password" type="password">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
<div class="form-group">
<input class="btn btn-primary navbar-btn btn-block" type="submit" name="commit" value="Sign In">
</div>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The container is too big and it go out of the screen?
Work on min-width and let container stay inside the viewport, than focus on padding.
<div class="dropdown-menu" style="padding: 10px;min-width:200px;">
probably you will have to work on dropdown-menu to fix it, we need the css code
I'm trying to do seach box like this:
What's the best way of doing it with bootstrap?.
I was playing with inline form and input group dropdown list, but I have problems with text input width, as it's not fills out whole page width.
http://www.bootply.com/LRUm7PdeMN
How about checking the snippet..
Rest of styling you can do yourself..
.container {
padding-top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="search-box">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" aria-label="..." placeholder="Search ...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All categories <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Wszystkie kategorie
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
<button type="submit" class="btn btn-default">
<i class="fa fa-search"></i>
</button>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</form>
</div>
</div>
</div>
</div>
I'm trying to have some text show up next to a button, however the text only shows up underneath the button. Currently, I have in my HTML code:
<div class="display: inline;">
<div class="td-dropdown" dropdown>
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a><li>
<li><a ng-click="dropChange('floor')">Floor</a></li>
<li><a ng-click="dropChange('building')">Building</a></li>
<li><a ng-click="dropChange('room')">Room</a></li>
</ul>
</div>
</div>
<a class="display: inline;">{{mockDropVal}}</a>
All I want to do is move the text from {{mockDropVal}} next to the button. As you can see, I've tried using the display: inline class (however i think i am using it incorrectly). As well, I tried to make my own class to do this, but it was unsuccessful.
Any advice or tips would be greatly appreciated!
What you've meant to put is style='display:inline;'!
Writing class='inline' and then having a class in your css file that was .inline{display:inline;} would work the same though.
Having said that, you need to change your markup a little so that the elements will be next to each other. I've moved the <a> tag next to the <button>, as that's where you want it to be. I've also changed class='' to style=''.
<div style="display: inline;">
<div class="td-dropdown" dropdown>
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
<a style="display: inline;">{{mockDropVal}}</a>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a><li>
<li><a ng-click="dropChange('floor')">Floor</a></li>
<li><a ng-click="dropChange('building')">Building</a></li>
<li><a ng-click="dropChange('room')">Room</a></li>
</ul>
</div>
</div>
Or with the CSS:
<div class="inline">
<div class="td-dropdown" dropdown>
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
<a class="inline">{{mockDropVal}}</a>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a><li>
<li><a ng-click="dropChange('floor')">Floor</a></li>
<li><a ng-click="dropChange('building')">Building</a></li>
<li><a ng-click="dropChange('room')">Room</a></li>
</ul>
</div>
</div>
.inline{display:inline}
I have adjusted your code according to your expected output. Do study the changes. Here is a jsbin to play with
.wrapper {
display: inline-block;
vertical-align: top;
}
.td-dropdown .buttons,
.td-dropdown .dropdownmenu {
display: inline-block;
}
.dropdownmenu ul li {
display: block;
list-style-type: none;
vertical-align: top;
}
.td-dropdown .buttons {
vertical-align: top;
!important
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="td-dropdown" dropdown>
<div class="buttons">
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
</div>
<div class="dropdownmenu">
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a>
<li>
<li><a ng-click="dropChange('floor')">Floor</a>
</li>
<li><a ng-click="dropChange('building')">Building</a>
</li>
<li><a ng-click="dropChange('room')">Room</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">{{mockDropVal}}</div>
I have this:
Here's the code
<div class="col-xs-8 col-xs-offset-2">
<form role="form">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
</div>
</div>
</form>
</div>
Fiddle: http://jsfiddle.net/ytqyowgt/
How do I make the dropdown list as wide as the input field + button?
Try setting:
.input-group-btn {
position: static;
}
.dropdown-menu {
width: 100%;
}
check the updated fiddle
Change a bit the structure of your HTML :
<div class="col-xs-8 col-xs-offset-2">
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
</div>
and CSS :
.input-group-btn ul {
width:100%;
}
The only thing is you loose the rounded corners on the button.
http://jsfiddle.net/ytqyowgt/4/