If I want to have text preceeding my dropdown button on the same line, how can I get the dropdown to align properly? Using this html, it aligns to the left edge of the div (i.e. the word "Choose"). But if I put the span outside of the dropdown div, the div begins a new line.
<div class="dropdown">
<span>Choose: </span>
<button class="btn btn-default dropdown-toggle" type="button" id="choice-dropdown" data-toggle="dropdown">Choice
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="choice-dropdown" id="choice-dropdown-list">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
Add this to the dropdown div, and move the span to the outside:
<span>Choose: </span><div class="dropdown" style="display:inline-block;">
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/
If i place a media object inside Bootstrap drop down, the menu should expand in width to accommodate media. In the example i wrote in the JSiddle, the heading and text below heading should not wrap to new line.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="account">
<form action="/tracker/logout" method="post">
<button type="button" id="accountHolder" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Lokesh<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<div class="media">
<img class="media-object pull-left" alt="" src="http://www.google.com/homepage/images/google_favicon_64.png">
<div class="media-body">
<a><h4 class="media-heading">Media heading</h4></a>
This is some sample text
</div>
</div>
</li>
</ul>
</form>
</li>
</ul>
please make output window larger to see menu on right corner as i want menu on right side.
https://jsfiddle.net/DTcHh/12500/
Thanks
HTML Markup:
I am using a dropdown inside of a paragraph in the markup shown below. When I try to load the page in a browser the dropdown markup appears outside of the paragraph.
<div class="logoBar">
<section class="container">
<p><span>SITE NAME</span><span class="glyphicon glyphicon-chevron-right"></span><span>Main Page</span>
<font class="pull-right">
<div class="dropdown">
<span class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span>myemail#gmail.com</span><span class="glyphicon glyphicon-chevron-down"></span></span>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Sign out</li>
</ul>
</div>
</font>
</p>
</section><!-- container -->
</div><!-- End logoBar -->
So, that's what is my doubt. Please note that I have already created the markup I wanted to use for my project. So , I am not worried for the layout but I just when through this case and I wanted to know the reason.
Why the dropdown doesn't stay inside of the paragraph in browser?
Don't used to div or form inside p used to DIV tag
<p> elements don't allow block level elements inside </p>
The P element represents a paragraph. It cannot contain block-level
elements (including P itself).
used to this
<div class="logoBar">
<section class="container">
<div><span>SITE NAME</span><span class="glyphicon glyphicon-chevron-right"></span><span>Main Page</span>
<font class="pull-right">
<div class="dropdown">
<span class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span>myemail#gmail.com</span><span class="glyphicon glyphicon-chevron-down"></span></span>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Sign out</li>
</ul>
</div>
</font>
</div>
</section><!-- container -->
</div><!-- End logoBar -->
p is an inline element and div is a block level evement.
use p tags inside div it should work fine in all the browser if you follow w3c standards
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/
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