WordPress.org

Make WordPress Core

#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:

Description

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;
}

Attachments (7)

Screen Shot 2012-09-16 at 11.13.55 PM.png (32.2 KB) - added by jeffreynolte 19 months ago.
Screenshot of tooltip bug / UI Display issue.
21904.opera.png (18.5 KB) - added by SergeyBiryukov 19 months ago.
21904.diff (468 bytes) - added by technosailor 19 months 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 19 months ago.
21904.3.diff (535 bytes) - added by lessbloat 19 months ago.
21904.overlapping.png (24.0 KB) - added by SergeyBiryukov 19 months ago.
21904.4.diff (334 bytes) - added by SergeyBiryukov 19 months ago.

Download all attachments as: .zip

Change History (18)

jeffreynolte19 months ago

Screenshot of tooltip bug / UI Display issue.

SergeyBiryukov19 months ago

comment:1 SergeyBiryukov19 months ago

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

Related: #21583

comment:2 nacin19 months 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

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

comment:3 technosailor19 months ago

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

comment:4 jeffreynolte19 months 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.

comment:5 technosailor19 months 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.

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

comment:6 jeffreynolte19 months ago

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

comment:7 technosailor19 months 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.

lessbloat19 months ago

comment:8 lessbloat19 months ago

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

http://f.cl.ly/items/2W1q3S1W1v0t0J0g1k2G/validation-styles.png

lessbloat19 months ago

comment:9 lessbloat19 months ago

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

http://f.cl.ly/items/1d1V0R3o280d36230i1a/validation-zindex.png

SergeyBiryukov19 months ago

comment:10 SergeyBiryukov19 months 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 19 months ago by SergeyBiryukov (previous) (diff)

comment:11 nacin19 months 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.