CODEWITHSUNDEEP
htmlcssforms
Ronny vdb
Ronny vdb

Reputation: 2474

CSS inline form with aligned inputs to label length and input width is remaining space

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: enter image description here

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: enter image description here

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

Answers (2)

fl0cke
fl0cke

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

Sayed Rafeeq
Sayed Rafeeq

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

Related Questions