Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#21904 closed defect (bug) (fixed)

Issue with Chrome / Safari (OSX) and limiting of characters for Media Options under screen options

Reported by: jeffreynolte Owned by: nacin
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4
Component: UI Keywords: needs-patch
Focuses: Cc:


I have recently discovered what seems to be a bug and after searching trac I was not able to locate any reports of this issue. The issue has to do with the limiting of characters / integer for the "Media Options" input field under the Screen Options tab. This is due to the default tooltip / error messages built into chrome for the min / max attributes on this input field.

When entering a number larger than 999 (the max attribute value for this element) in chrome I get a tool tip which does not display correctly (see screenshot below).

I have done some research on this issue and the css below will fix this issue in Chrome. I know min / max attributes are also supported in Opera but I did not get that far in my research to debug for this browser.

::-webkit-validation-bubble-message {
    z-index:9999 !important;

Attachments (7)

Screen Shot 2012-09-16 at 11.13.55 PM.png (32.2 KB) - added by jeffreynolte 6 years ago.
Screenshot of tooltip bug / UI Display issue.
21904.opera.png (18.5 KB) - added by SergeyBiryukov 6 years ago.
21904.diff (468 bytes) - added by technosailor 5 years ago.
Since patches are useful, this fixes Chrome. Firefox limits the field length already. Safari doesn't seem to respect the validation at all. It allows input of 1111 which is above the "max" attribute…
21904.2.diff (641 bytes) - added by lessbloat 5 years ago.
21904.3.diff (535 bytes) - added by lessbloat 5 years ago.
21904.overlapping.png (24.0 KB) - added by SergeyBiryukov 5 years ago.
21904.4.diff (334 bytes) - added by SergeyBiryukov 5 years ago.

Download all attachments as: .zip

Change History (18)

6 years ago

Screenshot of tooltip bug / UI Display issue.

#1 @SergeyBiryukov
6 years ago

Confirmed in Chrome 21. Looks good in Opera 12: 21904.opera.png (the up/down buttons don't have arrows though).

Related: #21583

#2 @nacin
6 years ago

  • Keywords needs-patch added; needs-testing ui-feedback needs-ui removed
  • Milestone changed from Awaiting Review to 3.5
  • Version changed from 3.4.2 to 3.4

5 years ago

Since patches are useful, this fixes Chrome. Firefox limits the field length already. Safari doesn't seem to respect the validation at all. It allows input of 1111 which is above the "max" attribute...

#3 @technosailor
5 years ago

Safari does respect the validation as it doesn't update the field value but it does submit instead of opening a validation bubble.

#4 @jeffreynolte
5 years ago

Thank you @technosailor. For future how would I go about submitting a fix for this? I have read the docs on wordpress.org but was not sure if this would contend as an actual fix for the issue as it was more of a hack for functionality that was not working properly.

#5 @technosailor
5 years ago

Modify the code on an up to date SVN checkout, then svn diff it and attach it to the ticket. Here's a handy resource giving you the how to.


#6 @jeffreynolte
5 years ago

Okay. So I should have submitted this as a .diff from the start? Thanks again.

#7 @technosailor
5 years ago

Yep. I mean, it's no big deal. i just made the diff for you but yeah, in general, if you can make a patch... that's ideal. It streamlines the process for the core devs. Path of least resistance to get code in.

Also note for modifying admin CSS, you'll need to set the constant SCRIPT_DEBUG to true in wp-config or WP will use the minified version of the CSS instead of the straight CSS file that, in this case, I modified in the patch. IF the patch is accepted, the unminified CSS will be minified so you don't have to worry about that.

If you want to modify the CSS in my patch, feel free. May want to also give special attention to Safari as noted above.

5 years ago

#8 @lessbloat
5 years ago

Those default ::-webkit-validation-bubble-message styles are horrid. Cleaned them up in 21904.2.diff. Error looks like this now:


5 years ago

#9 @lessbloat
5 years ago

21904.3.diff also fixes it without affecting the browsers default styles:


#10 @SergeyBiryukov
5 years ago

Tested 21904.3.diff.

Removing overflow: auto; in line 1125 seems enough to fix this issue (otherwise, z-index has no effect anyway), however it causes overlapping when viewing help: 21904.overlapping.png.

21904.4.diff is an attempt to fix that.

Last edited 5 years ago by SergeyBiryukov (previous) (diff)

#11 @nacin
5 years ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

In [22148]:

Make sure the default webkit validation tooltips are not hidden in the Screen Options tab. prop SergeyBiryukov, fixes #21904.

Note: See TracTickets for help on using tickets.