Currently I have a jumbotron setup with some paragraph text, and I would like to stick a button dropdown inline with the text.
Dropdown button
<span class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Button... <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Opt 1</li>
<li>Opt 2</li>
</ul>
</span>
Jumbotron
<div class="jumbotron">
<h1>Hello!</h1>
<p>Welcome</p>
<p>Another paragraph
<!-- dropdown is here -->
</p>
</div> <!-- jumbotron -->
If the dropdown is within the <p> tag, it does not "dropdown" (but renders). If it is outside of the <p> tag it functions fine, but I would like it to be inline with the text and need the text to be in the <p> tag to get the style. Any ideas?
Things to note -- If I replace the <span> tags with <div> tags, it will work fine within the <p> tags, but won't be inline.
Solution
Added class="pull-left" on the <p> tag to get it inline (from Esotericist's answer)
<div class="jumbotron">
<h1>Hello!</h1>
<p>Welcome</p>
<p class="pull-left">Another paragraph</p>
<!-- dropdown is here -->
</div> <!-- jumbotron -->
If you want it inline then you need to use pull-left and pull-right, see here for an example:
http://www.bootply.com/T2wgdlzhZf
Is it what you are looking for?
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/
I've added a right side list group to my site using bootstrap and then I added a collapse to every list group item, all these worked successfully. I am able to add text to the list group collapse without anything bad happening. However, whenever I try to add links, the collapse just leaves the link outside of the container box where the text is enclosed in.
Here is the code to one list-group element:
<!-- Defines the collpase method !-->
<a class="list-group-item" data-toggle="collapse" href="#mapscollapse">
<!-- Glypicon added !-->
<span class="glyphicon glyphicon-menu-down pull-right vcenter"></span>
<!--Added heading as maps !-->
<h4 class="list-group-item-heading">Maps</h4>
<!--Collpase Target !-->
<div id="mapscollapse" class="collapse">
<!-- Links !-->
<ul>
<li>Google</li>
</ul>
</div>
The link to the site: http://www.tabletstudios.ca/csgo.html click on maps section to see the issue in detail.
You an not use <a> tag inside <a> that's the reason it's going out of the container. To fix this for container you need to use <div> tag instead of <a>
your structure is
<div id="homecollapse" class="collapse in" aria-expanded="true" style=""><a class="list-group-item" data-toggle="collapse" href="#homecollapse" aria-expanded="true">
</a>Visit W3Schools
</div>
update your structure as follows
<div id="homecollapse" class="collapse in" aria-expanded="true" style=""><div class="list-group-item" data-toggle="collapse" href="#homecollapse" aria-expanded="true">
Visit W3Schools
</div>
</div>
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/
Is it possible to prevent the dropdown menu to dissapear when "clicking in it". Trying to use a dropdown as a container for a textarea.
e.g
<div class="row-fluid">
<div class="span12">
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
<strong id="revolver">
<i class="icon-envelope"></i> 
<span class="caret"></span>
</strong>
</a>
<ul class="dropdown-menu">
<div class="row-fluid send-message-textarea">
<div class="span12">
<textarea></textarea>
<br>
<button class="btn btn-mini"><strong>Send</strong></button>
</div>
</div>
</ul>
</div>
</div>
</div>
Edit:
I guess a copy paste of the dropdown function inside bootstrap.js and then alter the selector and remove the unwanted functionality could be an option. I took a look at https://github.com/twitter/bootstrap/blob/master/js/bootstrap-dropdown.js but I could not pinpoint exactly where the specific functionality lies. Help would be appritiated.
In your HTML, add an id to the <ul>
<ul class="dropdown-menu" id="test">
add a handler that prevents the dropdownmenu from responding to click
$(document).ready(function() {
$("#test").click(function(e) {
e.stopPropagation();
});
});
you are now able to click and edit in the textarea.