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/
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.
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;">
I have searched for my problem, but can not find a solution to mine.
how can I make text wrap in bootstrap 3 drop down menu
here is my html :
<div class="row"">
<div class="col-xs-12 col-sm-12">
<div class="btn-group btn-block">
<button type="button" class="btn btn-primary btn-block btn-lg dropdown-toggle" data-toggle="dropdown">
<span id="promotion"></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu" >
<li ng-repeat="a in model.list">
<a ng-bind="a"></a>
</li>
</ul>
</div>
</div>
</div>
The value of a coming from the database :
If a text gets bigger :
then it breaks my whole page and I can swap the page to the right. If it is a mobile device.
I have tried the solutions in the following question :
Bootstrap dropdown: how to make text wrap nicely
but it did not work for me.
Any Suggestions or any alternatives I can use to have a collapse drop down list in bootstrap twitter 3.
Thanks.
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
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.