I'm trying to fix a bug on a Worpress theme using jquery-Chosen multi select tool. Here is the page in which the form is: http://mitramimoveis.com.br/temp/ . The placeholder works well on desktops and is input through the theme's interface:
Theme's interface
However, on mobile devices, the multi select fields only show "0 selected", on Android and "0 Items", on iPhone. The placeholder I put doesn't show up at all. I already tried adding a blank Option as first, using custom jQuery through the "Custom CSS and JS" Wordpress plugin, but it didn't work - all the answers I found regarding this issue, addressed this as a solution.
The html code for the forms:
<!-- Row -->
<div class="row with-forms">
<div class="search-form-_property_type col-md-3 custom-tipo-imovel">
<select multiple name="_property_type[]" name="_property_type" id="_property_type" data-placeholder="Tipo de imóvel" class="chosen-select">
<option value="">Tipo de imóvel</option>
<option value="apartamento">Apartamento</option>
<option value="casa">Casa</option>
<option value="sobrado">Sobrado</option>
</select>
</div>
<div class="search-form-_cidade col-md-3 custom-tipo-imovel">
<select multiple name="_cidade[]" name="_cidade" id="_cidade" data-placeholder="Cidade" class="chosen-select">
<option value="">Cidade</option>
<option value="Curitiba">Curitiba</option>
<option value="Campo Largo">Campo Largo</option>
</select>
</div>
<div class="search-form-tax-region col-md-3 custom-tipo-imovel">
<select multiple name="tax-region[]" data-placeholder="Bairro" class="chosen-select">
<option value="">Bairro</option>
<option value="bigorrilho">Bigorrilho</option>
<option value="cabral">Cabral</option>
<option value="centro">Centro</option>
<option value="portao">Portão</option>
</select>
</div>
<div class="col-md-3 ">
<button class="button fullwidth">Buscar</button>
</div>
</div>
How can I solve this? I need the users to know what are the options about on each field and the theme doesn't offer a label (which I also don't want to use). Thanks.
*I noted that the first option is the same as the placeholder and has an empty value.
Hope this is welcomed feedback but placeholder text isn't ADA compliant. Here are some resources that can help you take a different approach if you so choose:
https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research
Example:
https://material-ui.com/components/selects/
Related
Pretty new to accessibility in web but been tasked with improving a page so your guidance would be much appreciated.
I have an HTML select element with a few options and each option will either reveal some additional questions or just some information. Just wondering if these conditionally revealed content has to be in some way tied to the selected option so that screen reader will announce to the user that new content has appeared on the page? I read about aria-live for somewhat similar implementations but not entirely sure if this is needed here? Select element and subsequent content looks like below although the toggling functionality is not yet implemented.
.hidden {
display: none;
}
<label for="employmentType">Your employment type</label>
<select id="employmentType">
<option value="0">Full time</option>
<option value="1">Part time</option>
<option value="2">Fixed term contract</option>
<option value="3">Student</option>
<option value="4">Unemployed</option>
</select>
<div class="value-zero-content hidden">
This is some information
</div>
<div class="value-one-content hidden">
<label for="empName">Employer name</label>
<input type="text" id="empName">
</div>
<div class="value-two-content hidden">
<label for="contractStart">Start date</label>
<input type="text" id="contractStart">
</div>
Thanks in advance.
I want class 'myclass' and 'col-3' only to be applied in lg size. In other cases I want only 'col'. How to do that?
I can do that:
<div class="d-none d-lg-block">
<div class="myclass col-3">
<select id="country-select">
<option value="">All</option>
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
</select>
</div>
</div>
<div class="d-block d-lg-none">
<div class="col">
<select id="country-select">
<option value="">All</option>
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
</select>
</div>
</div>
But there is a problem that I have two select forms with the same id 'country-select' and my jquery functions don't work correctly. I need the solution with only one select form with id ='country-select'.
I don't want to send data from select forms to server, so I don't need 'name' attribute. I need to use $("#country-select").val() in jquery code, but there is a problem I have two select forms with id ='country-select' in my solution.
Based on your condition for adding or removing class, you can use jquery:
$('.className').addClass('lg-size-class');
$('.className').removeClass('lg-size-class');
Note that id attribute should have a unique value when using it.
How I can disable uncheck option from the bootstrap multi-select drop-down, actually on load some option by default is checked and I want those options not to be unchecked. Below I am providing an image for better understanding.
! [Link for the sample image] 1
From the above image those three is by default checked while page load and now I don't want to be unchecked those three (Cheese, Tomatoes, Mozzarella)
Below I am providing the link of the above requirement.
Link to the sample code
Thanks
You can just simply add disabled (and selected) attributes to the options which you want to keep selected.
<div class="form-group">
<label class="col-md-4 control-label" for="rolename">Role Name</label>
<div class="col-md-4">
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese" disabled selected>Cheese</option>
<option value="tomatoes" disabled selected>Tomatoes</option>
<option value="mozarella" disabled selected>Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</div>
It's important that you only initialize the multiselect after you have set the attributes
I am working on an app that will have a setting page where the user can use the flip toggle to select the gender. The flip toggle consist of male (on off)and female (on off). Depending of the selection, an ul list will display with gender preference. I am struggling trying to find a solution with PHP or JQuery/JavaScript. Any code solution from you guys?
The HTML5 code:
<div data-role="page" id="page-settings" class="page-panel">
<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >
<label for="flip-1">Men</label>
<select name="flip-1" id="flip-1" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
<div data-role="fieldcontain" id="womenSelector" >
<label for="flip-2">Women</label>
<select name="flip-2" id="flip-2" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
The -ul -li list is appending from database +item.Gender+ with values : female or male.
Any help will be very appreciated since I have been searching foo three days with no success.
This is getting a bit crazy.
I have been trying the code for hours now and no luck:
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
From:
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-selects.html
When I test it on my mobile there is no dropdown ... actually, nothing hapens at all.
I'm I forgetting something?
If you look at the source of the web page you can see it's in a form tag:
<form action="#" method="get">
So Adding this between the form tags would get the desired results: Live Example Link
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</form>
Another problem it could be:
Try adding this tag to the dropdown: Live Example Link
data-native-menu="false"
I had the same problem and the decision is in the connected libraries
I include in head tag this css
code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css
and this
code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js
and all works well!
looks like a direct copy paste from the link did you include jquery and jquery mobile ?
I had this issue recently, and the accepted answer did not fix it for me. In the process of creating a question on it, I figured out the solution:
When using both jQuery UI and jQuery Mobile, UI must come before Mobile in your list of scripts.
I had this:
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Which resulted in UI having precedence over my form elements, especially noticeable in select menus. I switched these statements, and the menus were enhanced by Mobile properly.