Page MenuHomePhabricator

OOUI FieldLayout too restrictive on mobile
Open, Needs TriagePublic


I'm rendering a simple checkbox with label using FieldLayout

$fields[] = new OOUI\FieldLayout(
				new OOUI\CheckboxInputWidget( [
					'name' => 'enableBeta',
					'selected' => $context->isBetaGroupMember(),
					'inputId' => 'enable-beta-toggle',
					'value' => '1',
				] ),
					'label' => new OOUI\LabelWidget( [
						'label' => new OOUI\HtmlSnippet(
							Html::openElement( 'div', [] ) .
							Html::element( 'strong', [],
								$this->msg( 'mobile-frontend-settings-beta' )->parse() ) .
							Html::element( 'div', [ 'class' => 'option-description' ],
								$this->msg( 'mobile-frontend-opt-in-explain' )->parse()
							) .
							Html::closeElement( 'div' )
					] ),
					'align' => 'left',

When rendered on a mobile device it appears like so:

The checkbox is given 60% of the available space and the label the remainder:

.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
    width: 60%;
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
    width: 35%;
    margin-right: 5%;

This makes sense on tablet but not so much on mobile.
A good starting point would be to restrict the above rules to tablet. Currently it is near impossible to override them without resorting to !important

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 16 2017, 12:32 AM

'align' => 'left' and 'align' => 'right' for FieldLayout are basically terrible and I recommend avoiding them. You can use 'align' => 'inline' for checkboxes instead, unless there is a design requirement here for it to be laid out differently?

The goal of the alignment is to have 2 checkboxes and 1 select dropdown right aligned for mobile.

This is how the UI currently looks on tablet:

and on mobile:

Using 'inline' shifts the widgets to the left which looks very odd on mobile (if you use android/ios you'll see all checkboxes are right aligned).

Well, it seems like we just don't support that. Someone will probably need to implement a new 'align' in FieldLayout.

I'm not sure what the align layout would be called as I'm not sure how alignment is used in VisualEditor but you can see my workaround for this here:

Since i'm resorting to !important hacks it would be great to have a cleaner way of doing this and it would be beneficial and platform consistent for any forms in OOUI that display on mobile for instance

Volker_E renamed this task from OOUI\FieldLayout too restrictive on mobile to OOUI FieldLayout too restrictive on mobile.Dec 21 2017, 5:00 PM
Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.