CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3vertical-alignment
hmarques
hmarques

Reputation: 406

Vertical align input elements with different size label

I'm trying to align form-group vertically at the bottom whenever I've some label with more than one line.

Example: http://jsfiddle.net/9vtsojqg/3/

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">
        <div id="small" class="form-group">
            <label class="control-label">normal label</label>
            <input class="form-control"></input>
        </div>
    </div>
    <div class="col-xs-1">
        <div class="form-group">
            <label class="control-label">example of a huge label</label>
            <input class="form-control"></input>
        </div>
    </div>
</div>

The only way I found to align the elements vertically was adding margin-top to the form-groups with one line label

#small{
  margin-top:20px;
}

but with the grid system that could vary. How can I align the elements based on the biggest (most lines occupied) label?

Upvotes: 1

Views: 911

Answers (3)

hmarques
hmarques

Reputation: 406

Actually I just found the solution I was looking for in here, so using:

.row{
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */

I achieve what I was looking for. ex.: jsfiddle

Update: This will change the normal behavior of the class row so I suggest that this properties should be use with some caution. In my case I'll use this in form .row or assign another class to this elements. Other solutions or comments related to this solution are appreciated.

Update 2: New version after the heads up from Gorostas http://jsfiddle.net/9vtsojqg/8/

form .row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction: row nowrap;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;

  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

Upvotes: 2

tomas271
tomas271

Reputation: 25

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
            <div id="small" class="form-group">
                <label class="control-label">normal label</label>
                <input class="form-control"></input>
            </div>
        </div>
        <div class="col-xs-8">
            <div class="form-group">
                <label class="control-label">example of a huge label</label>
                <input class="form-control"></input>
         </div>
     </div>
</div>

Is that what you mean ?

Upvotes: 0

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Maybe you can wrapp all in table like this

http://jsfiddle.net/9vtsojqg/4/

<table class="table">
    <tbody>
        <tr>
            <td>
                <label class="control-label">normal label</label></td>
            <td>
                <label class="control-label">example of a huge label that have so many text, and so much text</label></td>
        </tr>
        <tr>
            <td>
                <input class="form-control"></input></td>
            <td>
                <input class="form-control"></input></td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions