CODEWITHSUNDEEP
htmlcsssasslabelwidth
Peter P.
Peter P.

Reputation: 3507

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

Upvotes: 0

Views: 1930

Answers (2)

Nathalia Xavier
Nathalia Xavier

Reputation: 1039

Try using flexbox instead of floats

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

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

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53674

You can use display: flex; on the parent and flex-grow: 1; on the input for the input to grow to fill the available space.

.form-inline {
  width: 600px;
  border: 1px dotted black;
  position: relative;
  left: 50px;
  top: 50px;
  padding: 10px 10px 0;
}
.form-inline .form-group {
  margin-bottom: 10px;
  width: 100%;
}
.form-inline .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);
}

.form-inline .form-group {
  display: flex!important;
}
.form-group input {
  flex-grow: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div>
    <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>
    <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>

Upvotes: 0

Related Questions