I would like to align the label of my search widget with the input text (they are slightly not aligned on all browsers). Any css tip ? thanks
This is my code:
<label for="edit-search" style="float: left;">Search</label>
<span class="views-widget">
<span id="edit-search-wrapper" class="form-item">
<input type="text" class="form-text" title="Enter the terms you wish to search for." value="" size="15" id="edit-search" name="search" maxlength="128">
</span>
</span>
</div>
<div style="position:relative;left:-10px;top:25px;">
<span class="views-widget">
<span id="edit-search-wrapper" class="form-item">
<input type="text" class="form-text" title="Enter the terms you wish to search for." value="" size="15" id="edit-search" name="search" maxlength="128">
</span>
</span>
</div>
The position relative will make the widget display where it should be in the natural document flow, then the left and top properties shift the widget around from that position. You are allowed negative values as there is no right and bottom property.
The solution is tuning the line-height values attributes.
Related
<div class="ms-Panel-content content-410">
<div class="panelSubheadingStyle-396">
We recommend you keep only one phone number and one address in your profile
for easy communication.
</div>
<fieldset class="groupedElements-421">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423">Phone number</label>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField134"
maxlength="15"
class="ms-TextField-field field-427"
aria-label="add phone number"
aria-invalid="false"
value="545465464"
/>
</div>
</div>
</div>
</fieldset>
<h3 class="panelSubheadTitleStyle-397">Address</h3>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>Street address<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField139"
aria-required="true"
maxlength="100"
class="ms-TextField-field field-427"
aria-label="add street address"
aria-invalid="false"
value="asd"
/>
</div>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>City<span class="requiredLabelStyle-419"> (required)</span></label
>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField144"
aria-required="true"
maxlength="100"
class="ms-TextField-field field-427"
aria-label="add city"
aria-invalid="false"
value="city input"
/>
</div>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>Country/region of residence<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-ComboBox-container dropdownStyle-394">
<div
data-ktp-target="true"
id="ComboBox149wrapper"
class="ms-ComboBox css-437"
>
<input
autocapitalize="off"
autocomplete="off"
aria-autocomplete="inline"
data-ktp-execute-target="true"
data-is-interactable="true"
id="ComboBox149-input"
class="ms-ComboBox-Input css-438"
type="text"
aria-expanded="false"
role="combobox"
aria-label="select your country or region"
aria-describedby="ComboBox149-error"
spellcheck="false"
placeholder="Select a country/region"
data-lpignore="true"
value="Venezuela"
style="font-family: inherit"
/><button
type="button"
class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446"
role="presentation"
data-is-focusable="false"
tabindex="-1"
>
<span
class="ms-Button-flexContainer flexContainer-67"
data-automationid="splitbuttonprimary"
><i
data-icon-name="ChevronDown"
aria-hidden="true"
class="ms-Icon root-32 css-321 ms-Button-icon icon-447"
style="font-family: FabricMDL2Icons"
></i
></span
>
</button>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>State/province<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-ComboBox-container dropdownStyle-394">
<div
data-ktp-target="true"
id="ComboBox153wrapper"
class="ms-ComboBox css-437"
>
<input
autocapitalize="off"
autocomplete="off"
aria-autocomplete="both"
data-ktp-execute-target="true"
data-is-interactable="true"
id="ComboBox153-input"
class="ms-ComboBox-Input css-438"
type="text"
aria-expanded="false"
role="combobox"
aria-label="select your state or province"
aria-describedby="ComboBox153-error"
aria-disabled="false"
spellcheck="false"
placeholder="Select a state/province"
data-lpignore="true"
value=""
style="font-family: inherit"
/><button
type="button"
class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446"
role="presentation"
data-is-focusable="false"
tabindex="-1"
>
<span
class="ms-Button-flexContainer flexContainer-67"
data-automationid="splitbuttonprimary"
><i
data-icon-name="ChevronDown"
aria-hidden="true"
class="ms-Icon root-32 css-321 ms-Button-icon icon-447"
style="font-family: FabricMDL2Icons"
></i
></span
>
</button>
</div>
</div>
</fieldset>
</div>
JAWS is not announcing text field information properly when focusing on 'city' text fields, as Jaws is reading previous field content information (street text box value). JAWS is reading the previous field value. When moved by the down arrow key to the city or street address field. It should only announce the input field value of the field which is focussed and not the field above it.
You are misusing <legend> here. Don't use legend to label the controls inside a fieldset!
Don't put <label> in <legend>. The legend is already a kind of label.
A <fieldset> is primarily a semantic grouping mechanism, labelled by (i.e. "accessibly named by") the (optional) <legend>. The legend labels the entire group, rather than any of its individual "children".
Yes, it is valid to have a fieldset containing only one control (or none at all), but ... why would you want to do this? That just adds complexity, unwelcome chatter (and extra keypresses) to the assistive tech experience of your content. As you have discovered, it also confuses the JAWS screen reader.
Don't be seduced by the default visual appearance of a fieldset. It is not purely presentational - it actually means something, so it will be included in the accessibility tree and will be announced by screen readers - as a group, not as a control.
If you would like to have a presentational box around each control, add some CSS borders to the wrapper divs you have used already.
It might make sense for all these controls to be inside a single fieldset with legend "Contact Info" or something like that.
Then, use <label> elements with for attributes pointing at the id of the relevant control. Typically, the label will appear just before or after the control (or its wrapper div) in the DOM.
The for attribute is how the screen reader knows which label is associated with which control. With the for attribute in place, you can (and should) remove the aria-label attributes entirely. It's always better to use the onscreen label as the accessible name, if possible.
BTW why are your buttons marked as presentational? Why not use semantic HTML instead of ARIA? You've used <fieldset> and <legend>, why not <select>?
I have an email input field that has to be aligned in the center of the page. I have tried using alignment, but it wouldn't align the input field. I can align the text in the input field, but not the physical input field.
"input" element is inline-element.
<div>
<input type="email" style="text-align:center" value="text is center"/>
</div>
this align the text in the input field.
you should be put style to parent.
<div style="text-align:center">
<input type="email" value="input box is center"/>
</div>
of course - "input" element should inline type.
if you changed "input" element's display type
try to other way.
<div>
<input type="email" style="display:block;margin:0 auto;" value="input box is center"/>
</div>
or
<div style="display:flex;justify-content:center;">
<input type="email" style="display:block;" value="input box is center"/>
</div>
This is driving me crazy. I've got a few sibling elements in the same form, input fields and divs (that contain input fields that need to stay on the same line), but when 100% width is applied to each, they aren't the same length; the divs are the same length as the other divs, and the independent inputs are the same as the other inputs. I've tried everything I can think of, and I can't figure out what's causing this behavior. It's messing-up my responsive styling, so I've come to a bit of a standstill...
If the width is 100%, and the elements are direct siblings of the same parent element, they SHOULD have equal widths, correct? In the screenshots below, the inputs inside the "bi-field-div" and "tri-field-div" elements are shorter, and the inputs that aren't inside a div are longer, even though the divs and inputs are both children of the same form element and are set to 100% (the one input you see in a class-less, id-less div still renders the same length as if there were no div at all-- I put it in there to test it.) I've tried extending the inputs within the divs by way of different percentages and margins and padding, but the div itself stays that shorter length, so the inputs within it just end up on different lines at a certain point; I've also fiddled with the positioning, displays, and everything else, and just can't get these stubborn things to stretch out equally!
I'll greatly appreciate any constructive advice you can give me.Thank you.
HTML:
<form>
<!-- pop-out text -->
<div class="div-form">
<p id="call-to-action">SIGN UP</p>
<p id="sub-text">Subrscribe to our newsletter</p>
<div id="bi-field-div">
<input type="text" class="form-field left-inline-field" placeholder="First Name">
<input type="text" class="form-field right-inline-field" placeholder="Last Name">
</div>
<div>
<input type="text" id="email" class="form-field" placeholder="Email">
</div>
<input type="text" class="form-field" placeholder="Phone" >
<div id="bi-field-div">
<input type="text" class="form-field left-inline-field" placeholder="State / Province">
<input type="text" class="form-field right-inline-field" placeholder="Zip">
</div>
<input type="text" class="form-field" placeholder="Company Name">
<input type="text" class="form-field" placeholder="How did you hear about us?">
<input type="text" class="form-field" placeholder="Company Name">
<div id="tri-field-div">
<input type="text" class="form-field tri-field" placeholder="Experience">
<input type="text" class="form-field tri-field" placeholder="Interests">
<input type="text" class="form-field tri-field" placeholder="Referral?">
</div>
<div class="signup-btn-div">
<button id="signup-btn">
SIGN UP
</button>
</div>
<div id="privacy-policy">
Privacy Policy
</div>
</div>
</form>
CSS:
Form CSS
What it looks like in browser:
Form in browser
I want to create a simple form. The final design should be the one above, but with a responsive positioning.
So I tried to use the inline attribute of css:
<!--Name...-->
<div style="display: inline;">
<label for="vorname_patient">Vorname: </label> <br> <input type="text" name="vorname_patient" id="vorname_patient" required="" size="20" autofocus=""> <br>
<label for="nachname_patient">Nachname: </label> <br> <input type="text" name="nachname_patient" id="nachname_patient" required="" size="20">
</div>
<!--Anrede...-->
<div style="display: inline;">
<label for=anrede_patient">Anrede: </label> <br> <input type="text" name="anrede_patient" id="anrede_patient" size="20">
</div>
If i run that i will not get any inlineme parts anywhere.
i want to get this (without a table):
https://jsfiddle.net/kcd1qr1r/
What did I do wrong here? Thank you!
Inline elements must flow within their nearest block parent. So, because you changed the div containers to be inline, your label and input elements are just flowing within the body (nearest block parent). Use inline-block instead or, due to possible margin issues with that approach, you may want to try flexboxes.
I do the following at <div class="offset3 span6"> with bootstrap-responsive.css:
<div class="control-group">
<label class="control-label" for="passport1">Series and passport number</label>
<div class="controls">
<input type="text" class="input-small inline" id="passport1" placeholder="" maxlength="4">
<input type="text" class="input-medium inline" id="passport2" placeholder="" maxlength="6">
<p class="help-block">Please input your passport details into two fields above</div>
</div>
</div>
But text label is not aligned with input fields (it is lower). How to fix it?
demo
You have a top padding on your label of 5px;
Consider overriding this inline or creating a more specific css selector and try again.