• 
      

    Fix alignment and wrapping issues in the new form styles.

    Review Request #10867 — Created Jan. 29, 2020 and submitted — Latest diff uploaded

    Information

    Review Board
    release-4.0.x

    Reviewers

    The new CSS form components had an issue where the field input area
    (field widget and help text) would wrap below the label if the input
    area's contents wrap. There's no easy solution if we stick with
    blocks/inline-blocks for these elements, but fortunately, table-based
    layout gives us exactly what we want.

    This change updates .rb-c-form-field__input and
    .rb-c-form-field__label to use display: table-cell when in aligned
    and desktop mode. This will let us keep the input area aligned next to
    the label area, with the wrapping occurring entirely within the input
    area in a natural way.

    Tested on some forms with a variety of inputs with and without wrapped
    content in desktop and in mobile modes, making sure that the alignment
    stayed and the content wrapped correctly.

    Tested this in Chrome, Firefox, and Edge.

    Commits

    Files