Reputation: 2474
I want to create inline label and inputs, and I want all the labels to have the width of the longest label. This I have achieved and this is how my result currently look like:
The problem is that I want the input fields to be the width of the remaing space to the right, indicated in the image below:
This is the css for the form:
form ol {
margin: 0px;
list-style-type: none;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
fieldset {
border: 0px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
margin-bottom: 2px;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
And this is my html:
<form>
<ol>
<fieldset>
<li><label for="username">Username</label><input type="text" id="username" required /></li>
<li><label for="username">This is some long text</label><input type="text" id="username" required /></li>
</fieldset>
</ol>
</form>
Once I set the fieldset width to 100% to fill the entire area, the input fields jump to the right as they have float right set.
What would be the best way to acheive keeping the inputs aligned to the longest label, but still use up all the remaining space? TIA!
Upvotes: 2
Views: 1869
Reputation: 2884
Simple solution using tables:
form, table, input{
width: 100%;
}
.label-col{
width: 1px;
white-space: nowrap;
}
label{
margin-right: 10px;
}
label:after{
content: ": ";
}
<form>
<table>
<tr>
<td class="label-col"><label for="username">Username</label></td>
<td><input type="text" id="username" required/></td>
</tr>
<tr>
<td class="label-col"><label for="username2">This is some long text</label></td>
<td><input type="text" id="username2" required/></td>
</tr>
<tr>
<td class="label-col"><label for="username3">This text is even longer heh</label></td>
<td><input type="text" id="username3" required/></td>
</tr>
</table>
</form>
If you know the max-width of your labels and/or are ok with clipping the label you can also use flexbox:
form, fieldset{
width:100%;
}
fieldset{
border: 0 none;
display: flex;
padding: 5px 0;
margin: 0;
}
label{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
input{
flex: 1 1 0;
}
<form>
<fieldset>
<label for="username1">Username</label>
<input type="text" id="username1" required/>
</fieldset>
<fieldset>
<label for="username1">This is some long text</label>
<input type="text" id="username1" required/>
</fieldset>
<fieldset>
<label for="username2">This text is longer than the max width asd</label>
<input type="text" id="username2" required/>
</fieldset>
</form>
Upvotes: 2
Reputation: 1219
Check this demo just you need to add float left to your form label: Also I have mentioned the edits in css code. You can check it.
Form Demo:
form ol {
margin: 0px;
list-style-type: none;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
fieldset {
border: 0px solid silver;
margin: 10px;
padding: 10px;
min-width: 500px; /** Added for fix **/
display: inline-block;
}
fieldset li {
width: 100%;
display: block;
position: relative;
margin-bottom: 10px;
overflow: hidden; /** Added for fix **/
}
fieldset label {
position: relative;
float: left; /** Added for fix **/
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input {
float: right;
width: 68%; /** Added for fix **/
}
<form>
<ol>
<fieldset>
<li><label for="username">Username</label><input type="text" id="username" required /></li>
<li><label for="username">This is some long text</label><input type="text" id="username" required /></li>
</fieldset>
</ol>
</form>
Upvotes: 0