What I'm looking for is whether there is a bootstrap model in select input that has the arrow + background on the right.
link
CODE HTML:
<div class="bootstrap-select input-group ">
<input type="text" autocomplete="off" name="my_select_label" class="form-control ">
<input type="hidden" name="my_select" value="">
<div class="input-group-btn open">
<button tabindex="-1" type="button" class="btn btn-warning dropdown-toggle active">
<span class="caret"></span>
</button>
<ul tabindex="-1" class="pull-right dropdown-menu warning">
<li class="active">
<a tabindex="-1" href=""></a>
</li>
<li>
<a tabindex="-1" href="Hydrogen">Hydrogen</a>
</li>
<li>
<a tabindex="-1" href="Helium">Helium</a>
</li>
<li>
<a tabindex="-1" href="Lithium">Lithium</a>
</li>
<li>
<a tabindex="-1" href="Beryllium">Beryllium</a>
</li>
<li>
<a tabindex="-1" href="Boron">Boron</a>
</li>
<li>
<a tabindex="-1" href="Carbon">Carbon</a>
</li>
<li>
<a tabindex="-1" href="Nitrogen">Nitrogen</a>
</li>
</ul>
</div>
</div>
I managed to find this model but has two problems:
1.is always open ... not going to click
2.I want to have a structure like the following...(currently is the type list)
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Does anyone know of an example that meet the above condition?
Thanks in advance!
I think maybe someone will have better way, but in the meantime you can try to use :before like this
HTML
<div class="container">
<div class="col-xs-6 mySelect">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
CSS
.mySelect {position: relative}
.mySelect select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color:transparent;
position:relative;
z-index:5;
}
.mySelect:before {
content: "\f078";
font-family: FontAwesome;
font-size:16px;
width: 34px;
height: 34px;
position: absolute;
top:0;
right:15px;
background-color:orange;
border-radius:0 4px 4px 0;
line-height:34px;
text-align:center;
color:white;
}
Demo
http://getbootstrap.com/components/#btn-dropdowns
I'm wondering that you import the jquery CDN into your source code on the <head> tag?
There may be some problems if you don't import jquery on you site.
And you should edit your <button> tags into like this code.
<button tabindex="-1" type="button" class="btn btn-warning dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
For the 2 problem, This may help you.
https://silviomoreto.github.io/bootstrap-select/
Related
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>
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 created a dropdown menu with search option in angular JS. when i click on it, a dropdown menu with search option comes. But as i scroll down, search also becomes a part of scroll. I want it to be fixed and placed at position where i clicked.
Here is the code for the dropdown menu.
<div class="dropdown dropdown-scroll" style="margin-top:15px;" >
<button style="width:220px;" class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
{selected.ApplicationName}}
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<div class="input-group input-group-sm search-control" fixed>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
<li role="presentation" ng-repeat='app in applicationArray | filter:query'>
<a ng-click="changeSelected(app)"> {{app.ApplicationName}} </a>
</li>
</ul>
</div>
The output is like this :
Now as i scroll, this search goes up and i cant see it anymore. Also, when i click on *select an application, i want the dropdown to be placed at that location where *select an application is there.
Try this fiddle
http://jsfiddle.net/kyrcha/ULSy3/6/
try this one
use navbar-fixed-top class with your search li
<li role="presentation" class="navbar-fixed-top">
<div class="input-group input-group-sm search-control" fixed>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
EDIT CODE :
I have updated fiddle.Please check it.
HTML :
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1 " ng-controller="ListCtrl">
<li><div class=" fixed-class input-group input-group-sm search-control "> <span class="input-group-addon ">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
<ul class="presentation-li">
<li role="presentation" ng-repeat='item in items | filter:query'> {{item.name}}
</li>
</ul>
</ul>
CSS:
ul.presentation-li li{
list-style: none;
}
ul.presentation-li li a{
color: black;
text-decoration: none;
}
.fixed-class{
position: fixed;
border-width: 0 0 1px;
width : 141px;
top: 37px;
bottom : 35px;
background-color: white;
}
you can add a new css class where you fix high and you overflow-y property to scroll:
.anyClass {
height:150px !important;
overflow-y: scroll !important;
}
In your HTML code, for example you will have something like that:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</button>
<ul (click)="$event.stopPropagation()" class="dropdown-menu" aria-labelledby="dropdownMenuButton01">
<li>
<input type="text" class="form-control" placeholder="Search">
</li>
<div class="anyClass" >
<app-item-component *ngFor="let item of array"></app-item-component>
</div>
</ul>
</div>
The (click)="$event.stopPropagation()" I added just to stop closing the select window after picking an item.
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/
I have a drop down menu that opens a row of icons underneath it (see picture 1, names and pictures were removed to maintain privacy)
I am trying to make this menu to open to the right of choose child, and not underneath it (see picture 2, of what I am trying to get. the Images will open to the right of the drop down and not under it)
My current code is:
<div class="span4">
<div class="btn-group">
<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
I tried to use the following example, that helps push the drop down to the left
how to make twitter bootstrap submenu to open on the left side?
but I could not figure out a way to use this to what I am looking to do
Thanks
How does this look:-
Demo
Demo2 Submenu dropping down.
<div class="span4">
<div class="btn-group"> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="right-caret right"></span>
</a>
<ul class="dropdown-menu rightMenu">
<li>
<div class="btn-group"> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
</div>
css
.rightMenu {
position:relative;
float:right;
}
.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 1;
vertical-align: top;
width: 0;
}
.right
{
float:right;
}
Just add the class "pull-right" into the <ul class="dropdown-menu"> this way...
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
I just add this class to the dropdown-menu:
.rightMenu {
position:absolute;
float:right;
top: 0;
left: 160px;
}
And it aligns perfectly.
To those who may find this page in the future, the now official way of doing this is with adding the .dropdown-menu-right class to your dropdown list.