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.
Related
So I have what should be an easy task that I just can't seem to find the answer to. The issue, of course, is somewhere in the CSS adjustment.
I have a bootstrap button group when includes a button dropdown. The group is pulled right inside a panel.
Here is a link to the Fiddle
my button group looks like:
<div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="dropdown">
<div class="btn-group-sm" role="group" aria-label="First group">
Favorite
<button href="#" class="btn btn-secondary dsbtnsec dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Graph Race <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Bar Chart</li>
<li>Pie Chart</li>
</ul>
County View
Explore Map
Export Race <span class="glyphicon glyphicon-export"></span>
</div>
</div>
</div>
The Graph Race drop-down works but isn't positioned under the button properly. I can't seem to figure out where the CSS issue is occurring. Can anyone point me in the right direction?
The issue happens with the default Bootstrap CSS so it's not something that I think I introduced.
I think your problem is the btn-toolbar class : <div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with button groups">
try this :
<div class="pull-right" role="toolbar" aria-label="Toolbar with button groups">
It's work for me : https://jsfiddle.net/4tgyu9u0/
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.
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.
Is it possible?
I tried the following code and it works. However, when the buttons are placed at different div's on the page, the menu is positioned at the wrong places.
<button class="btn btn-default" data-toggle="dropdown" data-target="#menu">Hello1</button>
<button class="btn btn-default" data-toggle="dropdown" data-target="#menu">Hello1</button>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" id="menu">
<li>Hi</li>
</ul>
</div>
http://jsfiddle.net/isherwood/mE62z/
It doesn't look like Bootstrap accommodates this. Cloning might work:
http://jsfiddle.net/isherwood/mE62z/5
$('#menu').clone().attr('id','menu2').appendTo('body');
$('#menu2').addClass('pull-right');