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?
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'm trying to make my site more accessible. I'm having trouble how to properly do buttons or anchor buttons. In my example I'll have an anchor but the same problem occur for buttons.
Here's how I did an anchor with a glyphicon. The Title attribute helps the mouse user understand what it does.
<a href="#" title="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
Is this enough for screen readers? Do I also have to add a the same description as sr-only?
<a href="#" title="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="sr-only">Delete lawn project</span>
</a>
Or maybe there's a better way that I haven't thought of.
Use aria-label on the interactive element (using title to display the tooltip is perfectly fine but you should also make it visible for keyboard or touchscreen users).
There's no need to set any special attribute (aria-* or role) on the empty span element.
<a href="#" title="Delete lawn project" aria-label="Delete lawn project" role="button" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</a>
As said by #steveax, you should use a native button element :
<button title="Delete lawn project" aria-label="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
This example would be better as a button since the functionality is a button (an action rather than navigating). If you use an <a> link with a button role, you need to handle all the keyboard interactions that you get for free with a button. Aside from that, what you had looks pretty good. I would make a small adjustment of adding role=img to the icon.
<button title="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-role="img" aria-hidden="true"></span>
<span class="sr-only">Delete lawn project</span>
</button>
Depending upon what browsers/screen readers you need to support, and alternate approach would be to use an aria-label property and omit the extra sr-only content:
<button title="Delete lawn project" class="btn btn-default btn-xs btn-danger">
<span class="glyphicon glyphicon-trash" aria-role="img" aria-label="Delete lawn project"></span>
</button>
As always, test.
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 am building an app with Bootstrap 3.3 and Bootstrap Material Design framework. I am trying to make a floating action button that opens when you click it.
In an attempt to do this, I've created this Bootply, which has the following code:
<div class="btn-group dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i></button>
<ul class="dropdown-menu dropdown-menu-right" style="min-width:0; background-color:transparent;">
<li><i class="material-icons">clear</i></li>
</ul>
</div>
The buttons works, but it doesn't look right. There are two issues that are driving me nuts. First, the popup menu isn't transparent. There is like a border and shadow that I can't seem to get rid of.
Second, I can't use the small version of the buttons as shown in the Floating action buttons section of the Bootstrap Material Design framework page. I'm not sure what I'm doing wrong.
So the .dropdown-menu in bootstrap CSS has by default box-shadow and border, which you have to reset it in order to make it transparent.
Plus in your Bootply it's not applying the Material Design Icons, because you didn't link the fonts.
Regarding small icons, add .btn-group-sm to .btn-group
Here is a working SNIPPET with examples for every sizes.
.floating-action-button {
position: relative;
top: 100px;
margin-left: 50px;
}
ul.dropdown-menu {
box-shadow: none;
border: 0;
min-width:0;
background:transparent
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Code -->
<div class="btn-group btn-group-lg dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div><div class="btn-group dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
<div class="btn-group btn-group-sm dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
<div class="btn-group btn-group-xs dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
I wouldn't say that it is ideal, but the following seems to solve part of your problem.
.dropdown-menu {
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
Unfortunately, I was not able to figure out what the material-icons class didn't work. Hopefully this answer will help you get closer to a solution.
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>