How to use container parameter with Bootstrap popover plugin - html

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

Related

Drop down buttons on website stopped working

When clicking the drop down menu nothing is happening, not sure what changed as it was working a short while ago. Any help would be appreciated.
<button class="btn btn-primary dropdown-toggle" style="width: 169%;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span id="dropdown_button">10 Closest Amenities</span> <span class="caret" style="margin-top: 9px;float: right;"></span> </button>
An example of where this can be seen is here.
This one stopped working as well.
<button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Search by cities in Montana <span class="fa fa-chevron-down"></span> <span class="fa fa-chevron-up"></span> </button>
assuming caused by the same action.
Seen here
Thank you everyone!
From what I noticed an event is missing from your h3 tag to change the display of this class that has display "none".
.header-one .nav-menu-container.nav-menu-main, .header-two .nav-menu-container.nav-menu-main {
display: none;
}
Can any of your javascript not be loading?

Using <a> tag or <button> tag for dropdown menues | bootstrap

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

Anchors don't work in Internet Explorer 10

Thanks for taking the time.
I implemented css bootstrap and got a nice fixed menu on top of my one page scrolling website. Just to make sure users instinctively see the navigation, I copied the menu below the header as well. Works well on every browser I have but IE 10.
Here's the code:
<div class="text-center">
<button type="button" class="btn btn-default btn-info">
123123
</button>
<button type="button" class="btn btn-default btn-warning">
13132123
</button>
<button type="button" class="btn btn-default btn-danger">
12313123
</button>
<button type="button" class="btn btn-default btn-success">
ЗА 132123123
</button>
<button type="button" class="btn btn-default btn-info">
12312313
</button>
<button type="button" class="btn btn-default btn-warning">
123123123
</button>
</div>
The div's are named like this:
<div class="news-holder cf" id="news">
They are closed and everything. I am completely new to web design so I don't know what's happening. It's bizarre.
As stated by #recursive a link should not be in a button.
Further more if this is a menu you most certainly should not be using button and avoid inline styles.
also check that you have div's on page with the id of news, articles etc.
if you need further assistance please supply more of your code.
try this.
<nav>
<ul class="text-center">
<li class="btn btn-default btn-info">
123123
</li>
<li class="btn btn-default btn-warning">
13132123
</li>
<li class="btn btn-default btn-danger">
12313123
</li>
<li class="btn btn-default btn-success">
ЗА 132123123
</li>
<li class="btn btn-default btn-info">
12312313
</li>
<li class="btn btn-default btn-warning">
123123123
</li>
</ul>
</nav>
<a> elements are not allowed inside of <button> elements.
http://www.w3.org/TR/html5/forms.html#the-button-element
there must be no interactive content descendant.
That's likely to be related to the problem. Since anchors have been well supported for decades.

How do you get an element to fill out the rest of the space in a btn-group?

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>

Bootstrap getting dropdown on same line as buttons

This is my code: http://jsfiddle.net/52VtD/7462/
I'm trying to put my dropdown and buttons on the same line. But I can't do that because the dropdown is a div and stays on the line below. How can I put them on the same line?
<div class="panel panel-default">
<div class="panel-heading">
<input type="checkbox">
<button type="submit" class="btn btn-xs btn-default">Stage</button>
<button type="submit" class="btn btn-xs btn-default">Add Label</button>
<button type="submit" class="btn btn-xs btn-default">Send Message</button>
<button type="submit" class="btn btn-xs btn-default">Archive</button>
<div class="dropdown">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Assign to<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Unsorted <span class="badge">12</span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action <span class="badge">42</span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here <span class="badge">42</span></a></li>
</ul>
</div>
</div>
Test
</div>
Never override or modify bootstrap base classes.. Always add new class or identity. You can do it like this :
Add new class "div-inline" to div with class dropdown..
Add this css
.div-inline{
display:inline-block;
}
JSFIddle : http://jsfiddle.net/rahulrulez/52VtD/7464/
As of bootstrap 4, you can change the dropdown line from:
<div class="dropdown">
to:
<div class="dropdown d-inline-block">
That will make all the buttons show up in one line.
Add this to your CSS:
.dropdown{
display: inline;
}
fiddle
I have just one drop down button and a few "normal" buttons. I am using bootstrap and did not want to get into editing CSS, so I resolved the issue as follows. It works, it is on one line, but the above solutions will work better if you have more than one dropdown on the same line.
I wrapped the whole thing (normal buttons and dropdown) into a <div class="row">. I then changed the <div class="dropdown> of the dropdown to <div class="dropdown col-sm-1" style="margin-right: 2%">. It did the trick.
My code looks like this:
<div class="row">
<spring:url value="/person/${person.id}/addaddress" var="addaddressUrl" />
<button class="btn btn-info"
onclick="location.href='${addaddressUrl}'">Add Address</button>
<spring:url value="/person/${person.id}/addphone" var="addphoneUrl" />
<button class="btn btn-primary"
onclick="location.href='${addphoneUrl}'">Add Phone</button>
<spring:url value="/person/${person.id}/addemail" var="addemailUrl" />
<button class="btn btn-success"
onclick="location.href='${addemailUrl}'">Add Email</button>
<spring:url value="/person/${person.id}/addpass" var="addpassUrl" />
<button class="btn btn-default"
onclick="location.href='${addpassUrl}'">Add Pass</button>
<spring:url value="/person/${person.id}/addnote" var="addnoteUrl" />
<button class="btn btn-warning"
onclick="location.href='${addnoteUrl}'">Add Note</button>
<div class="dropdown col-sm-1" style="margin-right: 2%">
<spring:url value="/person/${person.id}/role1" var="role1Url" />
<spring:url value="/person/${person.id}/role2" var="role2Url" />
<spring:url value="/person/${person.id}/role3" var="role3Url" />
<spring:url value="/person/${person.id}/role4" var="role4Url" />
<spring:url value="/person/${person.id}/role5" var="role5Url" />
<spring:url value="/person/${person.id}/role6" var="role6Url" />
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown"
>Add Role
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>role1</li>
<li>role2</li>
<li>role3</li>
<li>role4</li>
<li>role5</li>
<li>role6</li>
</ul>
</div>