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
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 have a working dropdown with proper CSS classes and it works as expected. In another html page I have copied the same div structures including the CSS classes but it doesn't work.
I am using Chrome browser and When I do the F12 - inspect, I notice that the parent div class are not getting prefixed, and also the right CSS classes are not getting referenced.
Please find the snapshots which compares both with F12 - Inspect details
HTML code for the dropdown which works correctly
<div class="application-list">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="applicationMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{selected.application}}<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="applicationMenu">
<li *ngFor="let app of applications">
<a (click)=onChange(app)>{{app.application}}</a>
</li>
</ul>
</div>
</div>
My HTML code for the dropdown which doesn't works correctly
<div class="col-lg-7">
<div class="col-xs-12 col-md-12">
<div class="col-lg-1">
<div class="application-list">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="applicationMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{selected.name}}<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="applicationMenu">
<li *ngFor="let app of workbookSheetsList">
<a (click)=onChange(app)>{{app.name}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
What is the mistake I am doing here?
EDIT: I just discovered a small, but essential detail:
The CSS selector in the first image starts with application-list..." - WITHOUT a leading dot, which applies to the <application-list> tag, but not for the class .application-list....
In your first example there actually IS a tag <application-list> in the HTML, in the second example there is a div tag with the class application-list- so the selector application-list.. in your first example will only apply to the tag, not to the class with that name.
To fix it, either insert a wrapping tag <application-list> into the HTML of the second page or change the selector of that CSS rule to '.application-list...` (including the dot) – the class is present in both examples, the tag only in the first one.
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
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.
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?