Bootstrap inline button dropdown within <p> jumbotron - html

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

How make <li> elements of dropdown overflow left

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/

Random Containers when adding link to collapse

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>

dropdown inside of paragraph moves out in browser

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

Button next to text with Bootstrap

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/

Use twitter-bootstrap dropdown menu as a container

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>&nbsp
<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.