I'm working on fixing this piece of code that creates this searchable combobox. I'm using a jQuery plugin called bootstrap select and I'm just trying to add some HTML elements so it can be properly read by the screen reader (using Mac VoiceOver).
I had gone thru many iterations using aria attributes, roles and others. The following code is the best iteration of it.
<div class="btn-group bootstrap-select form-control input-sm uif-multiSelectControl required validChar-document.developmentProposal.ownedByUnitNumber0 advanced_select" aria-required="true">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="uk9itrp_control" title="select" role="combobox" aria-label="Lead Unit" aria-haspopup="true"><span class="filter-option pull-left">select</span> <span class="caret"></span></button>
<div class="dropdown-menu open" style="max-height: 221px; overflow: hidden; min-height: 40px;">
<div class="bootstrap-select-searchbox">
<input id="to_fix_krad_bug" name="to_fix_krad_bug" type="text" class="input-block-level form-control valid dirty" role="combobox" aria-owns="results_jx1xgk">
</div>
<ul class="dropdown-menu inner selectpicker" role="combobox" id="results_jx1xgk" style="max-height: 169px; overflow-y: auto; min-height: 0px;">
<li rel="0" class="selected hide" role="option"><a tabindex="0" class="" style=""><span class="text">select</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1" role="option" class=""><a tabindex="0" class="" style=""><span class="text">000001 - University</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2" role="option" class="hide"><a tabindex="0" class="" style=""><span class="text">AA-AAAA - Unit A/span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="3" role="option" class="hide"><a tabindex="0" class="" style=""><span class="text">BB-BBBB - Unit B</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
When the combobox is focused (which focuses on the button) it's now properly reading it as a combobox and its label. Once you go on that, it doesn't appear to recognize the elements of the list. I tried adding aria-labelledby to the li elements but didn't had any luck.
I'm also using aria-owns on the input where the focus goes when you open the combobox so it get linked with the list.
I cannot move a lot this html since it's a plugin and I'm just trying to add attributes and make it accesible. Suggestions?
Related
My Blazor application has the following dropdown with checkboxes:
<div class="dropdown" style="position: absolute; top:0; right:0; ">
<button type="button" class="btn btn-lg dropdown-toggle" aria-haspopup="true" aria-expanded="false">Choose Columns</button>
<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1" >
<li><label><input type="checkbox" style="height:auto;" #bind="showDepartment"/> Department</label></li>
[... Numerous other Checkboxes ...]
<li><label><input type="checkbox" style="height:auto;" #bind="showName" /> Name</label></li>
</ul>
</div>
Everytime I click a checkbox in the dropdown, the dropdown disappears. I want it to only disappear when I click on the name of the dropdown or when I click outside of the dropdown. Is that possible to do somehow?
I'm having issues with getting my dropdown to work when it's inside a fully clickable card.
Basically what's happening is that I can't click the three dots with the dropdown without it opening the modal. I'm not sure how to separate the two.
I still want the card to be fully clickable but also have the dropdown when I click on the three dots.
My code
<div class="card card-container">
<div class="card-body">
<img class="mr-4" src="images/icon.png" width="30px" height="30px" >
Contact_name
<span class="d-inline float-right">
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img src="images/ellipsis.png" width="30px" height="30px">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li data-toggle="modal" data-target="#editContact" role="presentation"><a class="ml-3" role="menuitem" tabindex="-1" href="#">Edit</a></li>
<li data-toggle="modal" data-target="#deleteContact" role="presentation"><a class="ml-3" style="color: red;" role="menuitem" tabindex="-1" href="#">Delete</a></li>
</ul>
</div>
</span>
</div>
</div>
Fully clickable card:
Modal being displayed:
Dropdown on the card:
I review your code, the problem is that if the card is completely clickable you need to set a style property that indicates that a specific element is on top of the clickable card, in this case z-index property will do the job.
Try the following code:
I added z-index:99 to the dropdown <span> element.
<div class="card card-container">
<div class="card-body">
<img class="mr-4" src="images/icon.png" width="30px" height="30px" />
Contact_name
<!-- Dropdown element -->
<span class="d-inline float-right" style="z-index:99">
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img src="images/ellipsis.png" width="30px" height="30px">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li data-toggle="modal" data-target="#editContact" role="presentation"><a class="ml-3" role="menuitem" tabindex="-1" href="#">Edit</a></li>
<li data-toggle="modal" data-target="#deleteContact" role="presentation"><a class="ml-3" style="color: red;" role="menuitem" tabindex="-1" href="#">Delete</a></li>
</ul>
</div>
</span>
<!-- End of dropdown element -->
</div>
</div>
Definition and Usage: the z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
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/
What I'm looking for is whether there is a bootstrap model in select input that has the arrow + background on the right.
link
CODE HTML:
<div class="bootstrap-select input-group ">
<input type="text" autocomplete="off" name="my_select_label" class="form-control ">
<input type="hidden" name="my_select" value="">
<div class="input-group-btn open">
<button tabindex="-1" type="button" class="btn btn-warning dropdown-toggle active">
<span class="caret"></span>
</button>
<ul tabindex="-1" class="pull-right dropdown-menu warning">
<li class="active">
<a tabindex="-1" href=""></a>
</li>
<li>
<a tabindex="-1" href="Hydrogen">Hydrogen</a>
</li>
<li>
<a tabindex="-1" href="Helium">Helium</a>
</li>
<li>
<a tabindex="-1" href="Lithium">Lithium</a>
</li>
<li>
<a tabindex="-1" href="Beryllium">Beryllium</a>
</li>
<li>
<a tabindex="-1" href="Boron">Boron</a>
</li>
<li>
<a tabindex="-1" href="Carbon">Carbon</a>
</li>
<li>
<a tabindex="-1" href="Nitrogen">Nitrogen</a>
</li>
</ul>
</div>
</div>
I managed to find this model but has two problems:
1.is always open ... not going to click
2.I want to have a structure like the following...(currently is the type list)
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Does anyone know of an example that meet the above condition?
Thanks in advance!
I think maybe someone will have better way, but in the meantime you can try to use :before like this
HTML
<div class="container">
<div class="col-xs-6 mySelect">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
CSS
.mySelect {position: relative}
.mySelect select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color:transparent;
position:relative;
z-index:5;
}
.mySelect:before {
content: "\f078";
font-family: FontAwesome;
font-size:16px;
width: 34px;
height: 34px;
position: absolute;
top:0;
right:15px;
background-color:orange;
border-radius:0 4px 4px 0;
line-height:34px;
text-align:center;
color:white;
}
Demo
http://getbootstrap.com/components/#btn-dropdowns
I'm wondering that you import the jquery CDN into your source code on the <head> tag?
There may be some problems if you don't import jquery on you site.
And you should edit your <button> tags into like this code.
<button tabindex="-1" type="button" class="btn btn-warning dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
For the 2 problem, This may help you.
https://silviomoreto.github.io/bootstrap-select/
I created a dropdown menu with search option in angular JS. when i click on it, a dropdown menu with search option comes. But as i scroll down, search also becomes a part of scroll. I want it to be fixed and placed at position where i clicked.
Here is the code for the dropdown menu.
<div class="dropdown dropdown-scroll" style="margin-top:15px;" >
<button style="width:220px;" class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
{selected.ApplicationName}}
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<div class="input-group input-group-sm search-control" fixed>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
<li role="presentation" ng-repeat='app in applicationArray | filter:query'>
<a ng-click="changeSelected(app)"> {{app.ApplicationName}} </a>
</li>
</ul>
</div>
The output is like this :
Now as i scroll, this search goes up and i cant see it anymore. Also, when i click on *select an application, i want the dropdown to be placed at that location where *select an application is there.
Try this fiddle
http://jsfiddle.net/kyrcha/ULSy3/6/
try this one
use navbar-fixed-top class with your search li
<li role="presentation" class="navbar-fixed-top">
<div class="input-group input-group-sm search-control" fixed>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
EDIT CODE :
I have updated fiddle.Please check it.
HTML :
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1 " ng-controller="ListCtrl">
<li><div class=" fixed-class input-group input-group-sm search-control "> <span class="input-group-addon ">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
<ul class="presentation-li">
<li role="presentation" ng-repeat='item in items | filter:query'> {{item.name}}
</li>
</ul>
</ul>
CSS:
ul.presentation-li li{
list-style: none;
}
ul.presentation-li li a{
color: black;
text-decoration: none;
}
.fixed-class{
position: fixed;
border-width: 0 0 1px;
width : 141px;
top: 37px;
bottom : 35px;
background-color: white;
}
you can add a new css class where you fix high and you overflow-y property to scroll:
.anyClass {
height:150px !important;
overflow-y: scroll !important;
}
In your HTML code, for example you will have something like that:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</button>
<ul (click)="$event.stopPropagation()" class="dropdown-menu" aria-labelledby="dropdownMenuButton01">
<li>
<input type="text" class="form-control" placeholder="Search">
</li>
<div class="anyClass" >
<app-item-component *ngFor="let item of array"></app-item-component>
</div>
</ul>
</div>
The (click)="$event.stopPropagation()" I added just to stop closing the select window after picking an item.