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>
Related
I am new to bootstrap and created a website with that but my dropdown menu didn't work right it open "out of the window" so anyone can help me with that? I've tried a lot with classes but it didn't work...
https://i.imgur.com/DbjKm3U.png
my code:
<div class='dropdown'>
<button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown'>
<img class='rounded-circle float-right' height='45px' src='$profileimgurl' />
</button>
<ul class='dropdown-menu pull-left' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
<form action='includes/logout.inc.php' method='post'>
<button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
</form>
</li>
</ul>
</div>
The default behavior of Bootstrap's Dropdown Component is to align to the bottom left margin of whatever object triggered it. To override this behavior you apply dropdown-menu-right to the dropdown-menu. To use your own code as an example:
<ul class='dropdown-menu dropdown-menu-right' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
<form action='includes/logout.inc.php' method='post'>
<button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
</form>
</li>
</ul>
It is unclear whether you are using Bootstrap 3.x or Bootstrap 4.x, but in the latter you can also apply responsive behavior to this class (ie. .dropdown-menu-lg-right to better modify your UI on different devices or screens.
This Technique only work on Bootstrap 4
This is not problem bro, its default behavior of dropdowns but for solving this situation you need to use dropdown-menu-right class, for more info go to this link.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
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;
}
I have about 13 items in my list, so I'd like to make my dropdown menu in ui-bootstrap have at least two columns. Right now, here is my html for the button:
<div class="btn-group" uib-dropdown keyboard-nav>
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
Graph By Indications<span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li class="nav-item" ng-repeat="item in test2" ng-click="fullIndicationFunction(item)">{{item}}</li>
</ul>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li class="nav-item" ng-repeat="item in test1" ng-click="fullIndicationFunction(item)">{{item}}</li>
</ul>
</div>
Right now, I end up with separate columns on top of each other, and I'm trying to get them beside each other. I've tried the wrapping the <ul> tags with a <div class="row">...</div>, but that just stops the dropdown from working altogether.
Here is the what the above code produces:
Using one <ul> and having both the <li> elements within columns in a <row> will create the two column list I was looking for.
<div class="btn-group" uib-dropdown uib-keyboard-nav style="border-bottom: #357ebd 3px solid; border-radius: 10px">
<button class="btn btn-primary" ng-click="clearVals()">Clear</button>
<button type="button" class="btn btn-primary">
{{ displayedIndication }}
</button>
<button type="button" class="btn btn-primary" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" style="margin-right:-120px">
<div class="row" style="padding-left:7px; padding-right:7px">
<div class="col-sm-6" style="padding-left:-7px">
<li class="nav-item" ng-repeat="item in indList" ng-click="fullIndicationFunction(item)">{{item}}</li>
</div>
<div class="col-sm-6">
<li class="nav-item" ng-repeat="item in indList2" ng-click="fullIndicationFunction(item)">{{item}}</li>
</div>
</div>
</ul>
</div>
I used inline styles just to show that there are a bit of tweaks you'll need to make to have the lists look clean and even spaced without overlapping. Heres the result:
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>
Trying to do something very simple here:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul ng-repeat="name in Ids" class="dropdown-menu">
<li>
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
I can't see why this isn't working: if I attempt to simply render an unordered list then the data is displayed correctly. But as soon as I try to include it in bootstrap's dropdown menu, the button is displayed but not expanded when clicked.
Why are you doing ng-repeat on the ul element, it should be li element, otherwise you're creating multiple lists.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="name in Ids">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
Your code says to repeat the <ul> element, but don't you want to repeat the <li> elements? This should work:
<ul class="dropdown-menu">
<li ng-repeat"name in IDs">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
If you still have problems, I'd suggest you confirm your module is using the ui.bootstrap components. There are working examples of the dropdowns doing exactly what you want here on the documentation page.