WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 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:

Description

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

Download all attachments as: .zip

Change History (14)

comment:1 mmuro3 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 studionashvegas3 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 ohanesian3 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.

garyc403 years ago

float fix

garyc403 years ago

ohanesian's inline-block fix

comment:4 garyc403 years ago

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

comment:5 garyc403 years ago

  • Keywords has-patch needs-testing added

comment:6 nacin3 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 ocean903 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 garyc403 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

garyc403 years ago

removed overflow:hidden, added rtl support

comment:9 ocean903 years ago

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

comment:10 nacin3 years ago

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

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