<form>
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Username:</legend>
<input type="text" name="username">
</fieldset>
</div>
</form>
If I set a form width
form {
width: 300px;
}
On Iphone 4s, in portrait mode, the username label is shown on the same line as the username input, and the username label is clipped. If there is not enough width for both username label and input, the label should be displayed above the input. Why? If I remove the width:300px, it is responsive to width well.
In landscape mode, the username label is shown above the input (as expected).
Thanks
The field contain uses media queries based on screen width to place the label. You can use some CSS to override the media query CSS when you fix the form size:
<form>
<div class="ui-field-contain">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
</form>
form {
width: 300px;
}
form .ui-field-contain {
padding-top: 0.8em;
padding-bottom: 0.8em;
margin: 0 !important;
}
form .ui-field-contain label, form .ui-field-contain div {
float: none !important;
margin: 0;
margin-bottom: 0.4em;
width: auto !important;
}
Here is a DEMO
Related
I want to have a group of labels that take as much horizontal space as the widest label and at the same time all input fields should shrink to accommodate the larger labels. I need this since I deal with translations and cannot be sure how wide a certain label will be.
Something like this:
form {
display: table;
width: 100%;
}
label {
width: 1%;
display: table-cell;
white-space: nowrap;
padding-right: 1em;
}
input {
display: inline-block;
width: 100%;
}
.input-group {
display: table-row;
}
* {
line-height: 2em;
}
body {
padding: 2em;
}
<form>
<div class="input-group">
<label for="name">Full name of your family and yourself</label>
<input type="text" id="name" name="name" placeholder="optional">
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="optional">
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" placeholder="optional">
</div>
</form>
You can check this in Codepen too:
http://codepen.io/aboutandre/pen/bZRjqB
But is it there a more elegant way to do this that is more generic and doesn't involve using tables (be as HTML or CSS)?
How about specifying the width of the input fields to inherit from the desired/determining input field?
So for example if the name field is the determinant,make that have a width of 100% and and the other two elements -
width: inherit;
I have this HTML Code:
<h4>Company Details</h4>
<div>
<label for="company">Company</label>
<div>
<input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
</div>
</div>
I would like to have the text inputs and labels displaying inline with each other then as the screen gets smaller to move the text inputs under the labels
There are many ways to achieve this. Chose the one that fits your project the best. I would set the label and the div containing the input as "inline" or "inline-block" using CSS. Then if you need then line to collapse into two, use media queries (see the last code snippet).
<h4>Company Details</h4>
<div class="input-group">
<label for="company">Company</label>
<div>
<input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
</div>
</div>
// This will make them show inline occupying half the width
.input-group > label, .input-group > div{
display: inline-block;
width: 50%;
}
I sometimes have problems with extra pixels in inline-blocks,
and I typically solve it by floating the blocks or setting the
font size to zero.
// This way the label and input float
.input-group {
clear: both; // So the container doesn't collapse
}
.input-group > label, .input-group > div{
float: left;
width: 50%;
}
For the font size version:
// This way the font size in the container is zero
.input-group {
font-size: 0;
}
.input-group > label, .input-group > div{
display: inline-block;
width: 50%;
font-size: 12px;
}
Your div will automatically stretch to 100% of the screen, so You don't need media queries to set its width; it's already responsive as is. But if you insist on using them, or need them, add this as well:
#media (max-width: 500px) {
.input-group > label, .input-group > div{
display: block;
float: none;
}
}
It's pretty easy to achieve. Simply set:
.inputLine label, .inputLine div {
display: inline;
}
With the HTML being:
<h4>Company Details</h4>
<div class="inputLine">
<label for="company">Company</label>
<div>
<input type="text" name="company" value="My Company" />
</div>
</div>
Working example:
http://jsfiddle.net/wLjekogo/
Updated: april 20th, 2015
To achieve the requested output, while allowing multiple inline elements. You could use the following HTML/CSS combination:
HTML
<h4>Company Details</h4>
<div class="inputLine">
<label for="company">Company</label>
<input type="text" name="company" value="My Company" />
</div>
<div class="inputLine">
<label for="company">Company</label>
<input type="text" name="company" value="My Company" />
</div>
CSS
.inputLine {
display: inline-block;
}
.inputLine label {
display: inline-block;
max-width: "100%";
}
.inputLine input {
display: inline-block;
width: auto;
}
This would show all input fields inline, unless the screen is too small. In which case first the divs will be on a new line, and even more smaller, a vertical form.
Example:
http://jsfiddle.net/wLjekogo/2/
For fun I have taken a piece of code I got from a friend and tried to create a login field with username and password and I am having a hard time get the fields next to the words. There is a big gap between the word username and the box you type in.The same applies for password.
This is my code:
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="http://www."here you write url to webpage one should be directed to when typing wrong login".com">
Username:
<input type="text" name="fld_userid" size="15" style="width: 120px"><br>
Password:
<input type="password" name="fld_password" size="15" style="width: 120px"><br>
<input type="submit" name="cmd_invia" value="Login">
</form>
And my css code is the following.
input {
color: black;
margin: 10px 100px 0px 400px;
}
form {
color: white;
text-align: right;
position: fixed;
margin-top: 30px;
}
I am pretty new at this and would appreciate some tips! Thanks!
Well your margins are huge, try to make them smaller and see how it looks:
input {
color: black;
margin: 10px;
}
The style you are using has the following format:
margin: <top> <right> <down> <left>;
So with 100px right and 400px left they will get very far away :)
To be able to style the text you need it to be an element, so a simple answer would be to wrap it in some tag, but this is a style I personally enjoy, and adds a lot more meaning:
html
<label>
<span>Username:</span>
<input name="fld_userid">
</label>
css
label { display: block; text-align: center; }
input, span { display: block; width: 200px; }
This should stack both the text and the input on top of each other, while keeping them grouped by the label, so when you interact with the text the browser properly focus its related input.
I will add an explanation
margin: 10px 100px 0px 400px;
stands for:
top margin is 10px
right margin is 100px
bottom margin is 0px
left margin is 400px
Have you tried working with labels at all - keeping it semantic, and formatted, plus if you wrap your inputs it'll give it a larger hit area for said fields. In addition - I removed the input margin, removed the forms positioning and float so it retained it's block level, and adjusted the overall form margin so it's centered.
HTML
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="#"/>
<label>Username:
<input type="text" name="fld_userid" size="15"/><label>
<label>Password:
<input type="password" name="fld_password" size="15"/></label>
<input type="submit" name="cmd_invia" value="Login"/>
</form>
CSS
label {
display: block;
}
form {
text-align: center;
margin-top: 30px auto;
}
http://jsfiddle.net/evanbriggs/kad7yy1L/
Its better form to contain your labels in a <label> tag.
For example:
<div class="form-element">
<label for="foo">Label</label>
<input type="text" name="foo" id="foo" />
</div>
CSS to style it left justified:
.form-element label {
display: inline-block;
width: 150px;
}
Here is what my work is so far:
http://jsfiddle.net/2RCBQ/
<div id="main">
<form>
<label>First Name:<input type="text" id="firstname"></label><br/>
<label>Last Name:<input type="text" id="lastname"></label><br>
<label>E-Mail:<input type="text" id="email"></label><br/>
<label>Phone:<input type="text" id="phone"></label><br/>
</form>
</div>
CSS
#main {
width:300px;
}
#main input {
float:right;
display:inline;
}
#main label {
color: #2D2D2D;
font-size: 15px;
width:250px;
display: block;
}
Currently, the label (on the left) is kind of towards to top of the input field (on the right). I want to vertically align them so the label since in the middle of the input field.
I've tried vertical-align and it does not work. Please help me try to figure out the problem. Thanks.
I feel nesting <span> adds a lot of unnecessary markup.
display: inline-block lets the <label> and <input> sit next to each other just like with float: right but without breaking document flow. Plus it's much more flexible and allows more control over alignment if you (or the user's screen reader) want to change the font-size.
Edit: jsfiddle
label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}
label {
color: #2D2D2D;
font-size: 15px;
}
form, input {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
form {
width: 300px;
}
<form>
<label for="firstname">First Name:</label><input type="text" id="firstname">
<label for="lastname">Last Name:</label><input type="text" id="lastname">
<label for="email">E-Mail:</label><input type="text" id="email">
<label for="phone">Phone:</label><input type="text" id="phone">
</form>
You can use flexbox css to vertical align.
Just wrap the parent element display-flex.
.display-flex {
display: flex;
align-items: center;
}
html:
I add span in your label so we can add style specific for the text label:
<div id="main">
<form>
<label><span>First Name:</span><input type="text" id="firstname"></label><br/>
<label><span>Last Name:</span><input type="text" id="lastname"></label><br>
<label><span>E-Mail:</span><input type="text" id="email"></label><br/>
<label><span>Phone:</span><input type="text" id="phone"></label><br/>
</form>
</div>
css:
#main label span {
position:relative;
top:2px;
}
demo
You can enclose the <label> elements in a span and set the span's vertical-align to middle
HTML
<div id="main">
<form> <span><label>First Name:<input type="text" id="firstname" /></label></span>
<br/> <span><label>Last Name:<input type="text" id="lastname" /></label></span>
<br/> <span><label>E-Mail:<input type="text" id="email" /></label></span>
<br/> <span><label>Phone:<input type="text" id="phone" /></label></span>
<br/>
</form>
</div>
CSS
#main {
width:300px;
}
#main input {
float:right;
display:inline;
}
#main label {
color: #2D2D2D;
font-size: 15px;
}
#main span {
display: table-cell;
vertical-align: middle;
width:250px;
}
http://jsfiddle.net/2RCBQ/2/
I think that the following is the only method that works for all input types.
label { display: flex; align-items: center; }
input { margin: 0; padding: 0; }
<label><input type="checkbox"> HTML</label>
<label><input type="radio"> JS</label>
<label>CSS <input type="text"></label>
<label>Framework
<select><option selected>none</option></select>
</label>
I put because it seems to be the simplest way to align different input types; however, margins work just fine.
I know this is a super-old post, but I feel that the answers mix things and come to different solutions.
The original author asked about the label text's vertical alignment of implicit labelling; some answers solve this by using explicit labelling. I think this was not asked for.
See the difference between implicit vs. explicit labelling here: https://css-tricks.com/html-inputs-and-labels-a-love-story/#aa-how-to-pair-a-label-and-an-input
As I'm confronted every now and then I'd like to share my solution for implicit labelling.
The problem at explicit labelling is easily solved, since then you have your label as its own box and can apply any CSS of your liking to it rather independent of the associated input field.
However, at implicit labelling, the situation is different, since then the label text and the input are not separated items in this box. I think you do not have any other choice but to add a span around the text if you want to address the text independently from the input (note: you may not use a div here. Inside a label, only phrasing content elements are allowed: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content and div is not.)
This is what https://stackoverflow.com/a/15193954/8754067 stated above correctly, but the answer is lacking the dichotomy between implicit and explicit labelling. And has been not up-voted enough (at least in my personal view). Therefore, I feel the need to stress this again here.
form {
width: 400px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
form label {
display: grid;
grid-template-columns: 10rem 1fr;
gap: 0.5rem;
min-width: 100%;
font-size: 15px;
/* increase height to see effect. */
height: 3rem;
}
form label span {
margin-block: auto;
}
<form>
<label><span>First Name (middle):</span><input type="text" id="firstname"></label>
<label><span>Last Name (middle):</span><input type="text" id="lastname"></label>
<label>E-Mail (default):<input type="text" id="email"></label>
<label>Phone (default):<input type="text" id="phone"></label>
</form>
I am trying to make this for accessable for all browsers. Different browsers are giving different results (with IE the most problematic for me). I included screenshots so that you can see what I am talking about.
This is how the form looks in Safari, Firefox and Chrome:
http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/
This is how the form looks in IE6 and IE7:
http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/
And this is IE8 and IE9:
http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/
HTML
<form method="post" action="?test" id="form">
<label for="user">USERNAME</label>
<input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
<div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div>
<label for="password" class="clear">PASSWORD</label>
<input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required />
<div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div>
</form>
CSS
label {
background: yellow;
font-size: 12px;
font-weight: bold;
width: 100px;
float: left;
margin-right: 50px;
text-align: right;
cursor: pointer;
}
input {
height: 30px;
background-color: #fafafa;
border: 1px solid #abaaaa;
width: 300px;
margin: 5px 0 5px 0;
float: right;
}
Now my question is, how can I align the labels so they are vertically aligned with the input fields? I've used the search here and most of the time something like
vertical-align: middle;
is recommended, but this isn't working at all. The only fix for Safari, Chrome and Firefox is adding a margin-top or padding-top to the labels, but this destroys the form in IE8 and IE9.
What can I do about this issue? Dropping the height on the input field is not an option for me.
put a clear:both after the input tag (somewhere).
I would suggest you add more markup to your forms for extra customization. Typically I like to do forms like this:
<div class="field">
<label for="user">USERNAME</label>
<div class="field-subject">
<input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
</div>
</div>
.field {
overflow: auto; /* this "clears" the floated elements */
margin-bottom: 10px;
}
.field label {
float: left;
width: 200px;
}
.field .field-subject {
float: left;
width: 500px;
}