Ivanka Todorova Ivanka Todorova - 3 months ago 8
CSS Question

.form-group to have the height of the element inside

I want to set

border-right: 1px solid #2e2e2e
to a
.form-group
element, but it doesn't match the height of its content and it looks ugly.

Here's a demo:



/* My styles */

.form-group {
border-right: 1px solid #2e2e2e;
padding: 0 10px;
}

.bootstrap-select.btn-group .dropdown-toggle {
padding: 15px 40px 15px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>

<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<button type="submit" class="btn btn-info">Send</button>
</form>





Edit: Run it in
Full page mode
.

Answer

Set height:auto; to .form-control