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/
Related
We're using bootstrap in our project, and when we use dropdown we are asked to change our menu items from <a href="#" .. to <button> instead. Even tho the documentation for bootstraps use <a href ..
https://getbootstrap.com/docs/4.0/components/dropdowns/
I've asked the UX designer, and it has some issues with focus tabbing, like. when you tab through elements.
Is there any other compelling reason to use <button> over <a href="# ..
You can easily use buttons in a dropdown, too:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item">Action</button>
<button class="dropdown-item">Another action</button>
<button class="dropdown-item">Something else here</button>
</div>
</div>
Working example: https://www.bootply.com/NTH6FzGx4A
I basically have a button group with one button that is sometimes disabled ("Corpus delicti"). In the case it is disabled I want to show the user an explanation via a popover.
Since disabled elements require wrapper elements I wrapped a div around the button - what messed the styling up.
So I followed Bootstrap's hint "to specify the option container: 'body'" but styling is still messed up.
This is the markup, find it also in this fiddle:
https://jsfiddle.net/7ben7zmg/
<div class="btn-group" role="group">
<button onclick="console.log('huh')" type="button" class="btn btn-default">Log-Datei</button>
<div class="btn-group" role="group">
<div data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum..." data-trigger="hover" data-html="true">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled=""></button>
</div>
Corpus delicti <span class="caret"></span>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infoseite <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<button type="button" class="btn btn-default">TCP-Dump</button><button type="button" class="btn btn-default">Diesen Kunden deaktivieren</button>
</div>
Have no clue what I can do. Please help.
Apply data-toggle:popover in the btn-group instead of wrapping in other div..
Wrapping to another div will disturb your layout..
Updated Fiddle
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'm trying to get a Bootstrap btn-group to work, with a few fixed elements and a btn in the middle that grows to fill out the entire thing.
JSFiddle of what I'm trying to do: http://jsfiddle.net/DTcHh/2988/
Basically the idea is I'm trying to get the 3 and 4 buttons to stick to the right, while the "Text here" element fills out the rest of the space. Menu sticks to the left.
I've tried putting btn-group-justified on the element I want to expand out but that makes it take up the entire width of the screen, whereas I want everything to be on one line.
HTML:
<div class="btn-group" role="group" aria-label="First group" style="width:100%; margin-right:-300px">
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="First group" style="width: 100%; margin-right:-320px">
<span class="btn btn-default" style="width:100%;">
Some text here
</span>
</div>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
Any idea how I can achieve this?
Solved it.
Needed to set table-layout:auto on the parent group and add width:1% to the fixed size elements, width:100% to the expandable elements and add the class btn-group-justify to the parent group. Looks perfect now!
Fiddle: http://jsfiddle.net/DTcHh/2996/
try this
<div class="btn-group btn-group-justified" role="group" aria-label="First group" style="table-layout:auto">
<div class="btn-group dropup" role="group">
<a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<span class="btn btn-default" style="width: 100%;">Hey there</span>
<a type="button" class="btn btn-default">3</a>
<a type="button" class="btn btn-default">4</a>
</div>
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');