Summary

Fix alignment and wrapping issues in the new form styles.

Review Request #10867 — Created Jan. 29, 2020 and submitted Jan. 29, 2020, 2:41 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-4.0.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

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.

Testing Done

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

Summary	ID
Fix alignment and wrapping issues in the new form styles. 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.	8514ad853c20e80afce520f6409a115168aec73d

Summary

Fix alignment and wrapping issues in the new form styles.

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.

8514ad853c20e80afce520f6409a115168aec73d

flake8 passed.

JSHint passed.

Change Summary:

Made this less invasive, fixing error output, by only setting display: table-cell to the input and label areas. Same effect, fewer breakages.

Description:

		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` to use `display: table` and
~		`.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.
	~	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.

Commits:

	Summary	ID
	Fix alignment and wrapping issues in the new form styles. 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` to use `display: table` and `.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.	de3464a5c372a53429dd46ff9310f3ea2573e472
	Fix alignment and wrapping issues in the new form styles. 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.	8514ad853c20e80afce520f6409a115168aec73d

Diff:

Revision 2 (+62 -8)

Show changes

reviewboard/static/rb/css/ui/forms.less

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-4.0.x (f2148da)