Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#15329 closed defect (bug) (fixed)

Screen options nowrap causes text to escape the box

Reported by: nacin Owned by:
Milestone: 3.1 Priority: low
Severity: normal Version: 3.1
Component: UI Keywords: has-patch commit
Focuses: Cc:


See the screenshot.

This exists but isn't prevalent in 3.0 it seems, because Lucida Grande is a bit narrower than Verdana, thus it lines up okay on a typical monitor, resolution, etc.

3.0 with the screen resized: http://cl.ly/e0f679be0747528df416

It looks like the nowrap works to an extent, as if you make the screen any narrower, eventually it'll get bumped down (in whole) to the next line.

Setting to 3.1 because it's obvious now.

Attachments (3)

garyc40-15329.patch (397 bytes) - added by garyc40 11 years ago.
float fix
ohanesian-15329.patch (330 bytes) - added by garyc40 11 years ago.
ohanesian's inline-block fix
garyc40-15329-rev2.patch (680 bytes) - added by garyc40 11 years ago.
removed overflow:hidden, added rtl support

Download all attachments as: .zip

Change History (14)

#1 @mmuro
11 years ago

This seems to be a Webkit (Safari/Chrome) issue as I can't seem to reproduce this in Firefox, at least on the Mac.

Reducing the padding-right on the .metabox-prefs label from 12px to 5px brings the spacing down enough to keep everything in the box.

That's a pretty big change to the spacing of those check boxes, though.

#2 @studionashvegas
11 years ago

Attempted to reproduce bug (all browsers are PC)

FF: could not reproduce
IE8: could not reproduce
Safari: could not reproduce
Chrome: could not reproduce

#3 @ohanesian
11 years ago

I fixed this issue in Chrome/Safari for Mac by adding:

.metabox-prefs label { display:inline-block; }

I haven't tested in all browsers to check for side-effects.

I don't believe that this issue is at all caused by the nowrap.

11 years ago

float fix

11 years ago

ohanesian's inline-block fix

#4 @garyc40
11 years ago

Attached 2 ways of fixing this. One is floating left the labels, the other is ohanesian's display:inline-block.

#5 @garyc40
11 years ago

  • Keywords has-patch needs-testing added

#6 @nacin
11 years ago

Let's test both across all browsers down to IE6, and across to Opera. Either patch is fine with me, but I don't know the ramifications.

#7 @ocean90
11 years ago

I will make some tests. What I can say yet, display: inline-block; isn't supported by IE6. float: left looks good, I don't know why overflow: hidden is there?

#8 @garyc40
11 years ago

Oh, I didn't notice there was already a <br class="clear" /> inside .metabox-prefs. Will revise the patch (with proper floating for wp-admin-rtl.css ) in a moment

11 years ago

removed overflow:hidden, added rtl support

#9 @ocean90
11 years ago

The best solution, which works in all browsers, IE6 too, is the display: inline-block fix.

#10 @nacin
11 years ago

  • Keywords commit added; needs-testing removed
  • Version set to 3.1

#11 @nacin
11 years ago

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

(In [17075]) Don't let the screen options text escape the box. props ohanesian, fixes #15329.

Note: See TracTickets for help on using tickets.