I have a dropdown menu of checkboxes and some checkboxes with a <select> dropdown.
I have successfully used the e.stopPropagation() on the checkboxes.
The problem is that selecting an option in the <select> also closes the dropdown. I have tried adding it to the $(document).on('click', '.oneClass .anotherClass', function(e) but it still closes the dropwdown. I have tried other answers but they don't seem to apply.
This is the Code:
$(document).on('click', '.allow-focus', function(e) {
e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="preciplist" class="dropdown-menu allow-focus scrollable-menu" style="width:300px;">
<li id="nump1box"><label><input type="checkbox" name="numprecip1box" id="numprecip1box" checked>Number of Days</label><br>
<select id="snowliq1" name="1snowliq" style="width: min-content; color:#ffffff; background-color:#2c3e50; display:inline;" class="parameterInput form-control input-sm">
<option value="snow">Snow</option>
<option selected value="liq">Liquid</option>
</select>
<select id="NumPrecip1" name="1precipval" style="width: min-content; color:#ffffff; background-color:#2c3e50; display:inline;" class="parameterInput form-control input-sm">
<option value="">select one</option>
</select>
</li>
</ul>
Any ideas?
Thanks Dave
Related
HI i have a example with me when if select the drop down list - price by recyclables a hidden field apppear but how can i when select the Service charger the hidden field disappear
I have try using .attr to add back but it seems to be not working
$("#select-price-mode").change(function() {
if (this.value === "Price By Recyclables") {
$('.col').removeAttr('hidden');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col">
<label for="select-price-mode" class="col-form-label">Price Mode</label>
<select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
<option selected disabled value="">Select ....</option>
<option value="Price By Recyclables">Price By Recyclables</option>
<option value="Service Charger">Service Charger</option>
</select>
</div>
<div class="col" hidden>
<label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
<select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
<option selected disabled value="">Select ....</option>
</select>
</div>
i think this will solve your issue
$("#select-price-mode").change(function() {
if (this.value === "Price By Recyclables") {
$('.col').removeAttr('hidden');
} else {
$('.col').attr('hidden', '');
}
});
I have 2 <select> inside a hidden <div> which is revealed by a hover function in jQuery. The problem is that once the <div> is visible, if I click on any of the <select>s and move the cursor to the options inside, they collapse this <div> making it impossible to interact with them. This is an issue that I've been experiencing only in Firefox.
If anyone can give me a clue of what's causing the problem that'd be greatly appreciated.
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').hover(mouseEnter, mouseLeave);
function mouseEnter() {
$(".options-container").show(200);
};
function mouseLeave() {
$(".options-container").hide(200);
};
</script>
This is the reported issue in firefox. However I have made few changes on mouseleave event and also have updated the functions and now it will work fine on any browser also in firefox.
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').mouseenter(function() {
$('.options-container').show(200);
});
$('#tester-container').on('mouseleave', function(event) {
if ($('.options-container').has(event.target).length > 0) {
event.stopPropagation();
return;
} else {
$('.options-container').hide(200);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
Could someone tell me how I could change the width of the default drop-down menu that appears whenever I click on the search bar?
Image of the drop-down menu on search bar
Update: Thanks #bowlowl for letting me know that the default drop-down menu can not be edited.
You can set width of dropdown by
.dropdown-menu {
width:100%;
}
You can try jQuery onfocus event.
$(document).ready(function(){
$( ".searchbox" ).focus(function() {
$('#dropdown').css('width','100%');
});
});
<div>
<input type="text" placeholder="Type to search" class="searchbox">
<br>
<select id="dropdown">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I currently have a system that uses bootstrap and an option to select the menu. Blind users can not us it, because the options are not displayed.
Is there some JavaScript solution to fix the problem? I need the solution to work via keyboard input only, and work in IE.
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul>
<li class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li style="width:450px">
<div class="col-sm-3">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br />
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="col-sm-3">
<a href="#">
Link
</a>
<a href="#">
Link
</a>
<a href="#">
Link
</a>
</div>
<div class="col-sm-3">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br />
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li style="width:450px">
<div class="col-sm-3">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br />
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="col-sm-3">
<a href="#">
Link
</a>
<a href="#">
Link
</a>
<a href="#">
Link
</a>
</div>
<div class="col-sm-3">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br />
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</li>
</ul>
</li>
</ul>
Demo JSFiddle
Whether you use role='menu' or aria-expanded will have absolutely no affect on the behavior of your code. The ARIA properties are strictly for semantic purposes. All they do is give a hint to the assistive technology (such as a screen reader) as to the purpose and intent of the objects on your page. See https://www.w3.org/TR/aria-in-html/#role-not
Your code is not working based solely on your javascript. I am unable to use your fiddle example using just a keyboard. A screen reader is not involved.
I can hit space on the button to expand/collapse the menu items so that part is ok. And I can tab through the menu items so that's ok too. But I cannot use the arrow keys to select items in the <select>. As soon as I hit down arrow on a <select> component, the value does indeed change but then my focus is moved to the link.
If I try alt+downarrow, which should expand the <select>, it doesn't expand and then it moves my focus to the link.
So the accessibility of this example is very bad.
As far as how to fix it, there isn't enough code posted to see where the problem is. The fiddle example only shows a jquery.on().
This should be easy to fix. Using native html without any third party libraries such as bootstrap, you can get a demo of this working very easily and it works great with a keyboard (and a screen reader).
I can help further if more javascript is posted, but in the meantime, I'd suggest you focus your debugging in that part of your code.
Keyboard users can toggle the dropdown using the spacebar or enter key on the button. You could attach an aria-expanded attribute on the button and toggle it true/false depending on if the menu is visible or not. If you're interested in learning about how users navigate through a page using only the keyboard, Webaim has a great guide here.
The problem here is that you have a role="menu" on those dropdowns, but these are not menus - ARIA menus can only contain menu items, checkbox menu items, radio button menu items and submenus. https://www.w3.org/TR/wai-aria/roles#menu
Remove the role="menu" and it should work correctly.
Github bootstrap - Answer
Remove the role="menu" and it should work correctly.
I would like to remove the up/down arrows that show up next to the clock icon on right. Here is the image:
Here is the HTML:
<div class="form-group">
<label class="control-label">Date:</label>
<div class="right-inner-addon ">
<i class="glyphicon glyphicon-time"></i>
<select class="form-control input-lg">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
</select>
</div>
</div>
After applying the suggest css change below this is the result:
Try this using the appearance property:
The appearance property allows you to make an element look like a standard user interface element.
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}