Make WordPress Core

Opened 2 months ago

Closed 5 days ago

#41603 closed defect (bug) (fixed)

Custom date format field too small on mobile

Reported by: desrosj Owned by: melchoyce
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Date/Time Keywords: has-patch dev-feedback needs-testing
Focuses: ui, administration Cc:


On Settings > General, there is a field for entering a custom PHP date format string. This field is too small on mobile. The date preview is also broken up into two lines.

In #34539, the narrow field issue was addressed in other locations. Increasing the max-width here (it has its own CSS definition) does not necessarily fix the problem for this field.

The preview changes every time the option is changed, but it is displayed next to the custom option. If we move the preview to its own line, it fixes the issue of the preview being split up, and allows the field to be widened quite a bit.

Attachments (3)

41603-before-patch.png (124.5 KB) - added by desrosj 2 months ago.
41603-after-patch.png (171.3 KB) - added by desrosj 2 months ago.
41603.diff (2.4 KB) - added by desrosj 2 months ago.

Download all attachments as: .zip

Change History (10)

2 months ago

#1 @afercia
2 months ago

To clarify: the bold text "Preview:" would be visible also on large screens. Not that I'm opposed to that :) a11y-wise, visible text is always better then visually hidden one. Just thought was something to clarify.

#2 @desrosj
2 months ago

@afercia Thanks for clarifying! I forgot to mention that this change was for all orientations. I also was not sure if there are a11y benefits to putting the preview at the top as opposed to the bottom, or if there are any tags that we should use other than <span> for something like this. Would a <label> be beneficial?

Last edited 2 months ago by desrosj (previous) (diff)

#3 @afercia
2 months ago

@desrosj thanks! Hm, no I think that text doesn't need a label and it's fine it's to the bottom. FWIW the settings pages would be greatly improved for accessibility and that's one of the goals of the Settings API project (just an experiment for now, nothing official).

#4 @SergeyBiryukov
4 weeks ago

  • Component changed from General to Date/Time
  • Focuses administration added
  • Milestone changed from Awaiting Review to 4.9

Let's handle this along with #34539.

#5 @melchoyce
7 days ago

#34539 is merged. What do we need to get this finished up?

#6 @melchoyce
7 days ago

  • Owner set to melchoyce
  • Status changed from new to assigned

#7 @melchoyce
5 days ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 41857:

Settings: Widen time/day input fields on General Settings page, and move the preview onto the next line.

Props desrosj, afercia.
Fixes #41603.

Note: See TracTickets for help on using tickets.