Peter P. Peter P. -4 years ago 168
Sass (Sass) Question

Get form input to expand to full width of container with variable size label

There are several posts on SO that kind of cover expanding content to container. None of them seem to cover the use case of expanding a form control's width to its container when it has an inline label next to which has variable width.

I want the label to be whatever size it is, and then the text field to expand to the remaining width. Putting width: 100% makes it bump to the next line.

Sizing form controls with variable width labels
Here is code example: http://codepen.io/anon/pen/GWgraK

<form class="form-inline">
<div class="row">
<div class="form-group string optional bc_search_last_name">
<label class="string optional control-label" for="bc_search_last_name">label</label>
<input class="string optional form-control" type="text" name="bc_search[last_name]" id="bc_search_last_name">
</div>
</div>
<div class="row">
<div class="form-group string optional bc_search_first_name">
<label class="string optional control-label" for="bc_search_first_name">Really long label</label>
<input class="string optional form-control" type="text" name="bc_search[first_name]" id="bc_search_first_name">
</div>
</div>
</form>


and Sass css

.form-inline
width: 600px
border: 1px dotted black
position: relative
left: 50px
top: 50px
padding-left: 20px
padding-top: 5px

.form-group
margin-bottom: 10px
width: 100%

.control-label
padding: 6px 9px 6px 6px
border: 1px solid #ccc
border-right: 0
border-radius: 5px 0 0 5px
background-color: rgba(179, 177, 177, 0.28)
float: left

.form-control
width: auto
float: left

Answer Source

Try using flexbox instead of floats

  .form-group {display: flex}
  .form-control {flex: 1}

http://codepen.io/tuiaverde/pen/KWwWNX

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download