I'm trying to make a dropdown menu with Bootstrap on a Meteor.js/Iron project. For some reason the second instance of class="dropdown-header" is getting rendered outside the dropdown-menu.
Here's a pic: Click me
The same code works fine and renders correctly when run independently.
Has anyone else had issues such as this? Using Bootstrap 3.3.5 and Meteor 1.2
<ul class="dropdown-menu">
<li class="dropdown-header">Header</li>
<li>
<div class="col-sm-12">
<div class="btn-group" role="group">
<button class="btn btn-primary">Add</button>
<button class="btn btn-success">Edit</button>
</div>
</div>
</li>
<li class="dropdown-header">Why am I here???????</li>
<li>
<div class="col-sm-12">
<div class="btn-group" role="group">
<button class="btn btn-primary">Add</button>
<button class="btn btn-success">Edit</button>
</div>
</div>
</li>
</ul>
Try to create another ul for the second dropdown:
<ul class="dropdown-menu">
<li class="dropdown-header">Header</li>
<li>
<div class="col-sm-12">
<div class="btn-group" role="group">
<button class="btn btn-primary">Add</button>
<button class="btn btn-success">Edit</button>
</div>
</div>
</li>
</ul>
<ul class="dropdown-menu">
<li class="dropdown-header">Why am I here???????</li>
<li>
<div class="col-sm-12">
<div class="btn-group" role="group">
<button class="btn btn-primary">Add</button>
<button class="btn btn-success">Edit</button>
</div>
</div>
</li>
</ul>
Related
I can't figure out how to translate this from Bs3 to Bootstrap 4:
<!--Site-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Site</span>
<input type="search" name="searchBy" id="searchBy" class="form-control" placeholder="Suchbegriff eingeben"/>
<div class="input-group-btn">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle dropdown-button" type="button" data-toggle="dropdown">
<span>Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><</li>
<li>></li>
</ul>
</div>
</div>
</div>
</div>
I tried different ways, but all the time it looks so weird in bootstrap 4 oder even 5. Can u please help me with that?
I'm creating a page where the Next button in the page will redirect user to another tab / class in the same page.
I wanted a button that will link me to the next tab which is the Attachment tab using the #note as the reference.
What I have tried is I tried to put a link in the button but its not working. Is there any other way on how to do it? Other than put a link to it ?
<div class="col-md-12 text-right mt-4">
<button type="button" class="btn btn-md btn-primary" title="Add">Next</button>
</div>
<div class="default-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#next">Attachment</a>
</li>
</ul>
<div class="col-md-12 text-right mt-4">
<button type="button" class="btn btn-md btn-primary" title="Add">Next</button>
</div>
<div class="tab-pane fade" id="next">
<div class="pt-4">
<div class="col-lg-12">
......
</div>
</div>
</div>
</div>
I think you just need to add "#" in href.
Like this:
<div class="col-md-12 text-right mt-4">
<button type="button" class="btn btn-md btn-primary" title="Add">Next</button>
other than just adding an anchor tag, the possible way is to use javascript
HTML code :
<div class="col-md-12 text-right mt-4">
<button id="next" type="button" class="btn btn-md btn-primary" title="Add">
Next
</button>
</div>
here the javascript code,
const btn = document.querySelector('button#next');
const target = '#next';
btn.onclick = function () {
window.location.href = window.location.origin + target;
}
I have found my solution, below what I have tried
first I will add id="mytabs" in the ul
<ul class="nav nav-tabs" role="tablist" id="mytabs">
then at the button part I add on id="next"
<div class="col-md-12 text-right mt-4">
<button type="button" id="nextTab" class="btn btn-md btn-primary" title="Add">Next</button>
</div>
and lastly the javascript
<script>
$(function(){
$('#nextTab').click(function(e){
e.preventDefault();
$('#mytabs a[href="#next"]').tab('show');
})
})
</script>
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 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: