Gmail has the feature where you can select labels using checkboxes and it is hidden inside a div element where you can scroll up and down.
It also allows you to have customized actions like create new label at the bottom.
It also allows you to do filtering at the top with a simple search bar.
What is the simplest way to implement something like that and allow me to put in customized actions like the Create new label at the bottom?
At the barest minimum have a way to display all the checkboxes in a scrollable div or select element.
UPDATE:
Currently, I have only the following checkboxes
<div class="input select">
<label for="SiteSite">Sites</label>
<input type="hidden" name="data[Site][Site]" value="" id="SiteSite">
<div class="checkbox"><input type="checkbox" name="data[Site][Site][]" value="1" id="SiteSite1"><label for="SiteSite1">ODSite:P11379-440YishunAve11 HWSW_ESTA ENO21.000070.10001 92640145</label></div>
<div class="checkbox"><input type="checkbox" name="data[Site][Site][]" value="2" id="SiteSite2"><label for="SiteSite2">ODSite:P11374-SGRecClub HWSW_ESTA ENO21.000070.10002 92640147</label></div>
</div>
You can use a plugin called Select2, which has all the options you expect from a <SELECT> tag.
http://img594.imageshack.us/img594/543/select2.png
Related
I've been running around trying to figure out how I can use grid to format the layout of a form. I seem to be doing exactly what other coders are doing to utilize grid in CSS but it's just not working. My goal is to put the "type" selector to the right of the pet name and the reset button to the right of the submit button. Could someone point out what I'm missing?
my css code and what the form looks like
The HTML for the form
I think your issue might be because of the <div> you have on both input and select tags. By default div are block elements and browsers will start div on a new line by placing a line break before and after a div.
One quick fix is removing the div surrounding your Pet Name and
Type. If you must, have both of them in a single div.
Preferably use 1fr in place of 50%.
You will get this desired output
You are using seperate div for individual elements, that's why the elements are displaying one after another. You can put a common div for the elements which you want to display adjacent to each other.
<div class="grid">
<div>
<legend>Add pet</legend>
</div>
<div>
<label for="Name">Pet Name</label>
<input type="text" id="name" name="pet_name">
<label for="Type"></label>
<select id="type" name="pet_type">
<option value="Cat">Cat<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
</select>
</div>
<div>
<button type="submit" id="new_pet_submit_button">Create New Pet</button>
<button type="reset">Reset</button>
</div>
</div>
I have a form page with multiple div class called "inputs"
inside each div is the label of each form line and input for the form info
sample for one of them:
<div class="inputs">
<label for="ProductDesc:_">ProductDesc: </label>
<input disabled="disabled" id="invoices_ProductDesc" name="invoices.ProductDesc" readonly="readonly" type="text" value="Storage charge SC160-0000059 - 5.0 HCTZ0044 2018">
</div>
<div class="inputs">
<label for="SKU:_">SKU: </label>
<input disabled="disabled" id="invoices_ProductSKU" name="invoices.ProductSKU" readonly="readonly" type="text" value="">
</div>
Right now the display is something like:
ProductDesc
info here
SKU
SKU here
How can I make it so it becomes
ProductDesc SKU
info here SKU here
I tried using float:right on the input, and I also tried using display:inline but that didn't seem to work.
example of what i want https://imgur.com/Evc0Hvs
Wrap another div around them and set it up as a flexbox container by styling it as display: flex
display: inline-block;
Should work fine, I think there is additional styling that is effecting the overall styling.
Working example:
https://codepen.io/5amdev/pen/povqrYm
Problem: Grouping form elements
I have an HTML form, where in few places a single control is composed of several inputs. One example is a group of radio buttons.
I'd like to group those inputs and it's label explicitly, so that the screen readers would also (in addition to the visual representation by aligning them on a single line) be able to understand and announce this relationship.
For example, let's say I have a control like this:
<div class="control">
<div class="control-label">Type</div>
<div class="control-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</div>
Standard solution problems: Fieldset styling issues
fieldset element and it's child legend seem to be made exactly for that (used in the example below).
The problem is that fieldset and legend elements can't be styled like normal elements (some discussion about it) and nowadays other than in Firefox it's impossible to align them on a single line using Flexbox, which my layout requires.
<fieldset class="control">
<legend class="control-label">Type</legend>
<div class="form-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</fieldset>
Question: Is there some other way?
That makes me wonder if there is some accessible way to group several form controls other than using fieldset element?
Possible solution: role="group"?
There is a "group" role (used in the example below), which could be added to a simple div and it looks like it might do the job, but nowhere is stated clearly that it is the functional equivalent to using a fieldset. And if it does, then how do I mark an element of this group to serve as an equivalent of legend?
<div role="group"
class="control">
<div class="control-label">Type</div>
<div class="control-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</div>
Basically you have already answered your question in the Possible Solution section (btw, as a blind person, I'm just impressed how you styled your question with headings!). You missed one tiny and simple thing, the aria-label attribute:
<div role="group" class="control" aria-label="Type">
Note: this will be invisible on screen, it is a screen-reader only solution. If however you want to make it visible, do the following using the aria-labelledby attribute instead:
<div role="group" class="control" aria-labelledby="pseudolegend">
<div id="pseudolegend" class="style-it-like-a-legend">Type</div>
[...]
</div>
The pseudolegend may be a span or even a p, of course, if you find it more appropriate.
A quick and dirty local test I made showed that, at least with JAWS and Chrome, there is no difference between a fieldset and a div with aria-label.
Note: For radio button groups in particular you can use role=radiogroup. Also, in order for the semantics of a group or radiogroup to be expressed to screen reader users an accessible name for the grouping element is required.
I have kept a Custom select box in a Table Td cell, which when clicked opens a list of two custom options. Adding a row to the table creates another instance of the same Custom select box whose functionality is same as above.
<div class="multiselect">
<div class="InternetselectBox" id="Connectivity_COld9_InternetFacilityDiv_1" onclick="showInternetLocationCheckboxes(this)">
<select class="location_select" style="color: #666;" id="Connectivity_COld9_InternetFacility_1">
<option value="0"> 2 Location Selected</option>
</select>
<div class="overSelect"></div>
</div>
<div class="MultiSelect_checkboxes InternetMultiSelect" id="Connectivity_COld9_MultiSelect_checkboxes_1" style="display: block;">
<label for="Connectivity_COld9_InternetFacilityCHK_1_1">
<input type="checkbox" checked="checked" id="Connectivity_COld9_InternetFacilityCHK_1_1" name="lineup[]" onclick="InternetDynamicCheckboxCount(this)">
TCO
</label>
<label for="Connectivity_COld9_InternetFacilityCHK_1_2">
<input type="checkbox" checked="checked" id="Connectivity_COld9_InternetFacilityCHK_1_2" name="lineup[]" onclick="InternetDynamicCheckboxCount(this)">
MEPS
</label>
</div>
</div>
The issue is, when I click on the select box, and scroll the page or that particular div(table div), the drop down menu also moves along with the scrolling direction. I have a little bit of confusion with using Css style of Position
And when I add row and scroll down, the drop down also moves along.
Help me in resolving this issue. I want a drop down to appear just when I click the drop down and not move when I scroll down or up.
I tried to use css property position: relative to the drop down. But, it displaces or expands other Td of the same row. I do not need this.
Any css class needs to be added. Let me know. Any help is appreciated.
I currently write a user-interface for a search page on a local application. This search must have checkboxes to limit the scope of the search query. To make this functionality accesible I want to use "wai-aria"-Attributes.
So far my markup looks like this:
<div class="input-group">
<div class="checkbox-inline">
<input type="checkbox" id="check-bd-1">
<label for="check-bd-1">Band 1</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="check-bd-2"></input>
<label for="check-bd-2">Band 2</label>
</div>
(... and so on...)
<p id="help-check-band" class="form-control-static">Helptext...</p>
</div>
I want to use a "aria-describedby"-Attribute to reference the helptext, identified by "help-check-band". This text is appropriate for each input of this group.
My question is: Where should I put the "aria-describedby"-attribute? Is it neccesary to put it on each <input>-element, or does it suffice to put it in the topmost div (with class "input-group")?
According to The Mozilla Dev-Network both ways seem to be possible. "aria-describedby" can be utilized by the container and the input elements. Since the attributes on the input-Element correspond directly with the functionality, this way seems to fit this case.