Make WordPress Core

Opened 5 years ago

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

Download all attachments as: .zip

Change History (14)

comment:1 @mmuro5 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.

comment:2 @studionashvegas5 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

comment:3 @ohanesian5 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.

@garyc405 years ago

float fix

@garyc405 years ago

ohanesian's inline-block fix

comment:4 @garyc405 years ago

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

comment:5 @garyc405 years ago

  • Keywords has-patch needs-testing added

comment:6 @nacin5 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.

comment:7 @ocean905 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?

comment:8 @garyc405 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

@garyc405 years ago

removed overflow:hidden, added rtl support

comment:9 @ocean905 years ago

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

comment:10 @nacin5 years ago

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

comment:11 @nacin5 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.