Technique C38:Using CSS width, max-width and flexbox to fit labels and inputs

Applicability

This technique is applicable to Cascading Style Sheet / HTML technologies.

This technique relates to 1.4.10: Reflow (Sufficient).

Description

The objective of this technique is to be able to present labels and inputs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels for content intended to scroll vertically. When space is limited in the viewport for the label and input to sit next to each other horizontally, they will be changed to a vertical alignment. This is done by using CSS properties for width, max-width and flexbox that adapt to the available space.

Responsive layouts can add or remove columns or layout blocks, and each part of the layout can be wider or smaller at different points. This technique ensures labels and inputs do not break out of their layout area, including in one-column layouts where it would cause horizontal scrolling.

The basic approach for fitting labels and inputs is to:

  1. Define the size of layout regions using flexbox properties and media queries for specific viewport sizes, so they enlarge, shrink or wrap in the available space and respond to zoom levels;
  2. Position the layout regions in the flexbox container as a row of adjacent flexbox items, which may wrap to new rows as needed in much the same way as words in a paragraph wrap.
  3. Define the width and max-width property for labels and inputs so they enlarge or shrink in the available space and respond to zoom levels.

All labels and inputs require design finesse by making sure the original size fits the biggest size of the available spaces to achieve good-looking results at a wide range of viewport sizes and zoom levels. For help on flexbox please see the MDN article on Flexbox.

Examples

Example 1: Fitting labels, inputs and flexbox layout with HTML and CSS.

The following example uses HTML and CSS to fit labels and inputs within various width containers, including the viewport. The layout regions adjust their size as the viewport is adjusted. The labels and inputs subsequently adjust their size to fit within the layout region containers.

The zoom level can be increased to 400% without requiring horizontal scrolling. This particular example uses a percent size for the width and max-width for the labels and inputs. The max-width is applied in order to fix elements spilling out of the grid in a cross-browser way, as replaced elements such as the select have intrinsic sizing.



<style>

/* Fitting Inputs Styling */

.form-group {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -1rem 1rem -1rem;
}

[class*="form-col"] {
  flex: 0 1 100%;
  padding: 0 1rem;
}

@media (min-width: 576px) {
  .form-col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  
  .form-col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  
  .offset-form-col-4 {
    margin-left: 33.33333%;
  }
  
}

input {
  display: block;
  width: 100%;
}

label,
select {
  display: block;
  width: 100%;
  max-width: 100%;
}

</style>

<div class="form-group">
  <div class="form-col-4">
    <label for="fname">First Name</label>
  </div>
  <div class="form-col-8">
    <input type="text" id="fname" autocomplete="given-name">
  </div>
</div>

<div class="form-group">
  <div class="form-col-4">
    <label for="lname">Last Name</label>
  </div>
  <div class="form-col-8">
    <input type="text" id="lname" autocomplete="family-name">
  </div>
</div>

<div class="form-group">
  <div class="form-col-4">
   <label for="favorite-fruit">Favorite fruit</label>
  </div>
  <div id="favorite-fruit" class="form-col-8">
    <select>
      <option>Banana</option>
      <option>Pineapple</option>
      <option>Strawberry</option>
    </select>
  </div>
</div>

<div class="form-group">
  <div class="offset-form-col-4 form-col-8">
    <button>Submit</button>
  </div>
</div>

Working example: Using Adjustable Labels and Inputs for Reflow

Tests

Procedure

  1. Display the web page in a user agent capable of 400% zoom and set the viewport dimensions (in CSS pixels) to 1280 wide and 1024 high.
  2. Zoom in by 400%.
  3. For vertically scrolling content, all labels and inputs fit in their available space without horizontal scrolling.

NB: If the browser is not capable of zooming to 400%, you can reduce the width of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.

Expected Results

Check #3 is true.