I do not understand how I can hide a form in html without enlarging the other element. This is a dropdown menu with a html form hide:
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Language <i class="icon-angle-down"></i> </a>
<ul class="dropdown-menu" style="background:#a2a2a2">
<li>
<form id="form-ItemIDLangID" action="ItemView.php" method="post">
English
<input type="hidden" name="itemPOST" value='itemID'>
<input type="hidden" name="langPOST" value='langID'>
</form>
</li>
...
</ul>
and this is the result:
without the form:
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Language <i class="icon-angle-down"></i> </a>
<ul class="dropdown-menu" style="background:#a2a2a2">
<li>
English
</li>
...
</ul>
this is the result:
I can't understand how I can use the form and not have that enlarged effect in the first image, I want it to look like the second image, how I can solve it?
First, you have invalid HTML. An LI can only be the sibling of other LIs. [Update: I wasn't seeing the UL that was WAY offscreen. My mistake.]
Then, you probably have styles on your form that cause the gray space in your image--something like form {margin-bottom: 15px;}. Without your CSS or a demo it's impossible to say.
Related
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.
The up and down arrow keys are not working when the anchor tag is used instead of the button tag. Please help me out.
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Example<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a >HTML</a></li>
<li><a >CSS</a></li>
<li><a >JavaScript</a></li>
</ul>
</div>
By specifying tabindex=-1 in every anchor tag, the arrow key functionality can be brought back.
I got the answer myself. Thanks everyone.
I have a drop-down menu whose horizontal location depends on the width of the browser's window, and O can't find the way to get it open under the button with the left border aligned to the left border of the button.
Here is the HTML:
<td class="navbar-brand navbar-left" style="width:48%;margin:0;padding:0;text-align:center;margin: 8px 0 0 0">
<div class="dropdown">
<button class="dropdown-toggle" role="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-globe"></i> <label>{{Current_Language_Record.Code}}</label>
</button>
<ul class="dropdown-menu" style="padding:10px;left:0;width:250px" role="menu">
<li href="#"
ng-repeat="One_Entry in Interface_Languages_List | IF_Lang_Filter: Current_Language_Record.Code track by $index"
ng-click="New_Set_Language(One_Entry);"
style="cursor:pointer">
{{One_Entry.Code}} - {{One_Entry.NativeName}}
<hr ng-if="!$last">
</li>
</ul>
</div>
</td>
I tried adding the classes dropdown-menu-right and dropdown-menu-left but they don't show to have any effect. Also tried pull-right (which did the trick with another button I have) with no effect either.
Could anyone suggest what is it that I'm doing wrong?
Many 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.
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