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>
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>
How to make links and buttons be aligned in list using bootstrap?
I need to make them aligned left with reasonable padding.
Can I do it without CSS and my own classes?
<div class="btn-group">
<button type="button" class="btn btn-default btn-icon dropdown-toggle" data-toggle="dropdown">
menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="btn btn-link text-left" href="">
Edit
</a>
</li>
<li class="divider"></li>
<li>
<form action="" method="POST" >
<button type="submit" class="btn btn-link">
Delete
</button>
</form>
</li>
</ul>
</div>
https://jsfiddle.net/63gn7has/
You can overwrite the below CSS class of bootstrap and try this
.dropdown-menu>li>a {
text-align: left!important;
padding: 10px!important;
}
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 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 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.