Make WordPress Core

Opened 8 years ago

Closed 7 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 7 years ago.
float fix
ohanesian-15329.patch (330 bytes) - added by garyc40 7 years ago.
ohanesian's inline-block fix
garyc40-15329-rev2.patch (680 bytes) - added by garyc40 7 years ago.
removed overflow:hidden, added rtl support

Download all attachments as: .zip

Change History (14)

#1 @mmuro
8 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
8 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
7 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.

7 years ago

float fix

7 years ago

ohanesian's inline-block fix

#4 @garyc40
7 years ago

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

#5 @garyc40
7 years ago

  • Keywords has-patch needs-testing added

#6 @nacin
7 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
7 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
7 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

7 years ago

removed overflow:hidden, added rtl support

#9 @ocean90
7 years ago

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

#10 @nacin
7 years ago

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

#11 @nacin
7 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.