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

[jeffreynolte]

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 {
    position:absolute;
    top:-30px;
    left:200px;
    width:300px;
    z-index:9999 !important;
}

[jeffreynolte]

Screenshot of tooltip bug / UI Display issue.

[SergeyBiryukov]

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

Related: #21583

[technosailor]

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...

[technosailor]

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

[jeffreynolte]

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.

[technosailor]

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.

​http://markjaquith.wordpress.com/2005/11/02/my-wordpress-toolbox/

[jeffreynolte]

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

[technosailor]

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.

[lessbloat]

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

[lessbloat]

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

[SergeyBiryukov]

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.

[nacin]

In [22148]:

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