CODEWITHSUNDEEP
htmlcssflexbox
alex
alex

Reputation: 7601

How to move labels from top to left and make the inputs 100% long in a flex form?

In other words, how to get from this:

enter image description here

To something like this:

enter image description here

In other words, from labels on top of the input to labels on the left side of the input while making the input fit the parent's width. 

.row {
      display: flex
    }
    
    .form-group {
      display: flex
      flex: 1 0 0
      flex-direction: column
    }
    
    .col-12 {
      //
    }
    
    .col-6 {
      //
    }
    
    .col-4 {
      //
    }
<div class="row">
  <div class="form-group">
    <label class="col-6">First name</label>
    <input class="col-6" type="text" value=""></input>
  </div>
  <div class="form-group">
    <label class="col-6">Last name</label>
    <input class="col-6" type="text" value=""></input>
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-8" type="text" value=""></input>
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value=""></input>
  </div>
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value=""></input>
  </div>
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value=""></input>
  </div>
</div>

Upvotes: 2

Views: 1481

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371679

You don't need display:flex on your row- declaring it on the form-group is sufficient. Then you add the according flex properties on the child elements (input and label).

Also very important: Always insert ; after each declaration, or you will break the entire rule block.

/* essential rules */
.form-group {
  display: flex;
}
label {
  flex: 0 0 100px;
}
input {
  flex: 1;
}


/* only for style */
.form-group {
  margin-bottom:1em;
}
input{
  padding:.4em;
  border-radius:2px;
  border:1px solid #ccc;
}
label {
  padding:.4em;
  font-family:sans-serif;
}
<div class="row">
  <div class="form-group">
    <label class="col-6">First name</label>
    <input class="col-6" type="text" value="">
  </div>
  <div class="form-group">
    <label class="col-6">Last name</label>
    <input class="col-6" type="text" value="">
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-8" type="text" value="">
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value="">
  </div>
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value="">
  </div>
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value="">
  </div>
</div>

Note: inputs are void elements. They don't take closing tags.

Upvotes: 3

Related Questions