user348173 February 2016

Vertical align input and select from different rows

I have simple html:

 <div class="row">

    <div class="col-md-4 pull-right">
        <input type="text" class="form-control input-sm" />
    </div>
</div>

<div class="row">
    <div class="col-md-4 pull-right">
        <select class="form-control input-sm">
            <option value="0">NEW</option>
            <option value="1">PROCESSING</option>
            <option value="2">SHIPPED</option>
            <option value="3">COMPLETED</option>
        </select>
    </div>
</div>

But, input is bigger than select. Can you explain me why? This is DEMO PS. I can't change rows.

Answers


pritesh February 2016

See, in HTML, input fields have in-built fixed width. So you have to override or use width property in css to increase the size of the input field. Let me know if you want to change the width.


jiff February 2016

it's depending to your select box's value length, I'm not expert in bootstrap but at all if you want to solve your problem you should make a little change in your code:

select.input-sm {
    height: 30px;
    line-height: 30px;
    width: 100%;
}

.pull-right {
    float: right!important;
    width: 50%;
}

Working Fiddle

Post Status

Asked in February 2016
Viewed 3,472 times
Voted 4
Answered 2 times

Search




Leave an answer