I have followed multiple suggestions in respect to box sizing. I cannot get the input to politely stretch (expand) to fit the available space.
Does anyone have any suggestions?
.form-label {
cursor:pointer;
padding:10px 8px 0px 8px;
min-width:60px;
text-align:right;
}
.form-label,
.form-field {
float:left;
}
.clear {
clear:both;
}
.form-row {
display:flex;
margin-bottom:4px;
background-color:#000000;
}
.form-field input {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
height:36px;
width:100%;
max-width:100%;
-webkit-flex:1;
}
.form-field select {
height:36px;
margin-right:6px;
}
<div class="form-row">
<div class="form-label">
<label for="label">Label:</label>
</div>
<div class="form-field">
<input type="text" name="label" id="label" value="" />
</div>
<div class="clear"></div>
</div>
<div class="form-row">
<div class="form-label">
<label for="radius">Radius:</label>
</div>
<div class="form-field">
<select name="unit_for_radius" id="unit_for_radius">
<option value="CM">Centimeter</option>
</select>
</div>
<div class="form-field"><input type="number" name="radius" id="radius" value="" required pattern="\d+" />
</div>
<div class="clear">
</div>
</div>
Current output:
Desired outcome:
Tried using absolute positioning which makes the input field expand past the edge of the container (parent).
Try This:
.form-label {
cursor:pointer;
padding:10px 8px 0px 8px;
min-width:60px;
text-align:right;
}
.form-field {
width: 100%;
}
.auto-width-form-field {
width: 100%;
}
.form-label,
.form-field {
float:left;
}
.clear {
clear:both;
}
.form-row {
display:flex;
margin-bottom:4px;
background-color:#000000;
}
.form-field input {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
height:36px;
width:100%;
max-width:100%;
-webkit-flex:1;
}
.form-field-auto-width select {
height:36px;
margin-right:6px;
}
<div class="form-row">
<div class="form-label">
<label for="label">Label:</label>
</div>
<div class="form-field">
<input type="text" name="label" id="label" value="" />
</div>
<div class="clear"></div>
</div>
<div class="form-row">
<div class="form-label">
<label for="radius">Radius:</label>
</div>
<div class="form-field-auto-width">
<select name="unit_for_radius" id="unit_for_radius">
<option value="CM">Centimeter</option>
</select>
</div>
<div class="form-field"><input type="number" name="radius" id="radius" value="" required pattern="\d+" />
</div>
<div class="clear">
</div>
</div>
Explanation:
The parent width of the input was only stretching as much as your input needs.
Consequently if you set the input width to take 100% of the parent width it will still only take as much space as it needs.
So I adjusted the input parent space so it takes 100% of it's parent.
Also I made few adjustments to the select separately so that one doesn't stretch.