Page MenuHomePhabricator

Input fields should be relative to input strings
Closed, ResolvedPublic

Description

fields are too long

input fields are unreasonably long on http://mwui.wmflabs.org/wiki/Special:Preferences#mw-prefsection-editing

Editor Columns and Rows supports a max value of 1000, e.g. 4 characters, the input fields should limit input to 4 characters and be sized such that 4 characters fit comfortably ~70 pixels in length.


Version: unspecified
Severity: normal

Attached:

Details

Reference
bz70404

Event Timeline

bzimport raised the priority of this task from to Needs Triage.
bzimport set Reference to bz70404.
bzimport added a subscriber: Unknown Object (MLST).

In the style guide inputs are defined as having a width of 100% of the containing element.

We probably need a modifier for these types of input e.g. mw-ui-input q small ?

Note we could use the size attribute but it's not clear how this would work on a mobile device/in a responsive layout.

I wasn't saying the field should be less tall, rather less wide. A standard control is good, just needs to hold fewer characters.

  • Bug 70425 has been marked as a duplicate of this bug. ***

I know. Width 100% = wide.

What should the size be? Should small be the default or should big be the default for input fields?

The input field should suggest to the user the type of content that should be entered. There is no hard and fast rule for open ended fields, however fields with structured input (character limited) should support the number of characters allowed plus consistent padding.

  • Bug 70405 has been marked as a duplicate of this bug. ***

As another example as pointed out by Jared this happens here"

Special:Preferences => Appearance tab => Time offset => Other (specify offset)

Then, the text field below is too long.

Change 161016 had a related patch set uploaded by Prtksxna:
inputs.less: Use .mw-ui-input-inline for type="number"

https://gerrit.wikimedia.org/r/161016

Change 161016 merged by jenkins-bot:
inputs.less: Use .mw-ui-input-inline for type="number"

https://gerrit.wikimedia.org/r/161016