I'm trying to do something really simple : have some text and a group of buttons (using the btn-group class) next to it:
Make your choice : BUTTON
Here is the code I use :
<div>
<p>Make your choice :</p>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Select 1</li>
<li>Select 2</li>
<li>Select 3</li>
</ul>
</div>
</div>
This code produces something like:
Make your choice :
BUTTON
I'm looking for a Bootstrap solution to have the text and the button on the same line. I don't want to create my own styles, I'd like to achieve this using existing Bootstrap classes/components.
remove the <p></p> :
<div>
Make your choice :
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Select 1</li>
<li>Select 2</li>
<li>Select 3</li>
</ul>
</div>
Ok, this is way after the fact (but may be useful for others), and doesn't really use the bootstrap classes 'properly' but I wanted some text next to buttons but also aligned properly with them: simply making the text inline didn't result in it being vertically aligned with the buttons. Turns out you can just abuse the btn class:
<div class="btn">
Actions:
</div>
<button class="btn btn-default" >Back To Client</button>
<p> element has display:block as default, that's why u're seeing button below it. You could make it inline (or inline-block). i.e.
http://jsfiddle.net/2fTmb/
Related
Using bootstrap I'd like to show combobox which should expand and show its items into visible part of web page.
Given following snippet:
<div class="row">
<div class="col-xs-5">I contain long label</div>
<div class="col-xs-3"></div>
<div class="col-xs-4">
<div class="dropdown">
<button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<span>Options</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>This is very long text which normally overlays box on right</li>
</ul>
</div>
</div>
</div>
jsfiddle here
When dropdown button is expanded it overflows on right side and causes scrollbar to show.
How it would be possible to utilize free space on left side - e.g. make <ul> and <li> overflow original combobox header on other side and so prevent scrollbar to appear?
Just add class dropdown-menu-right to your ul item like
<ul id="migratorAvailableBuildings" class="dropdown-menu
migratorDropDownRight dropdown-menu-right"
Fiddle
adding .pull-right to ul.dropdown-menu should do it, updated fiddle http://jsfiddle.net/hku8a8nf/3/
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.
I have searched for my problem, but can not find a solution to mine.
how can I make text wrap in bootstrap 3 drop down menu
here is my html :
<div class="row"">
<div class="col-xs-12 col-sm-12">
<div class="btn-group btn-block">
<button type="button" class="btn btn-primary btn-block btn-lg dropdown-toggle" data-toggle="dropdown">
<span id="promotion"></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu" >
<li ng-repeat="a in model.list">
<a ng-bind="a"></a>
</li>
</ul>
</div>
</div>
</div>
The value of a coming from the database :
If a text gets bigger :
then it breaks my whole page and I can swap the page to the right. If it is a mobile device.
I have tried the solutions in the following question :
Bootstrap dropdown: how to make text wrap nicely
but it did not work for me.
Any Suggestions or any alternatives I can use to have a collapse drop down list in bootstrap twitter 3.
Thanks.
Is it possible?
I tried the following code and it works. However, when the buttons are placed at different div's on the page, the menu is positioned at the wrong places.
<button class="btn btn-default" data-toggle="dropdown" data-target="#menu">Hello1</button>
<button class="btn btn-default" data-toggle="dropdown" data-target="#menu">Hello1</button>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" id="menu">
<li>Hi</li>
</ul>
</div>
http://jsfiddle.net/isherwood/mE62z/
It doesn't look like Bootstrap accommodates this. Cloning might work:
http://jsfiddle.net/isherwood/mE62z/5
$('#menu').clone().attr('id','menu2').appendTo('body');
$('#menu2').addClass('pull-right');
I can easily use Bootstrap to create a button dropdown such as the following:
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
content goes here
</ul>
</div>
However, this creates a button and block element (?).
Is it possible to use Bootstrap's button dropdwon to create normal text (best to be inline), clicking on which produces a dropdown?
I am not talking about Bootstrap tooltip. I am hoping to use the dropdown to hold a more complex layout.
Thanks for any idea or suggestion!
So you want a link instead of a button to toggle the dropdown? use this markup:
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
You can add any content here
</ul>
</div>
You can also add
.dropdown {
display: inline-block;
}
To make it appear inline