WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 7 months ago

#23904 closed defect (bug) (fixed)

CSS glitch when the browser window width isn't right

Reported by: Denis-de-Bernardy Owned by: ocean90
Milestone: 3.7 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch commit
Focuses: ui Cc:

Description

The post editor's layout now switches when the width of the window is narrow enough. But there's an intermediary zone, at least on Webkit/Safari where it's too narrow for the conditional CSS to kick in, yet too wide for the browser to deal with it. I presume, based on what I was working on a few minutes ago, that it's related to paddings.

Screenshot attached.

Attachments (4)

wp-admin-css-bug.png (142.5 KB) - added by Denis-de-Bernardy 13 months ago.
wp-admin-css-breakpoint-toolbar.patch (420 bytes) - added by jakemgold 9 months ago.
Increases breakpoint to collapse admin toolbar by 45px
23904.diff (418 bytes) - added by melchoyce 7 months ago.
23904.2.patch (662 bytes) - added by vinod dalvi 7 months ago.

Download all attachments as: .zip

Change History (27)

comment:1 SergeyBiryukov13 months ago

  • Component changed from General to Administration
  • Keywords ui-focus added

comment:2 jakemgold9 months ago

  • Cc jake@… added

Able to replicated in Safari 6.0.5.

Working on it.

comment:3 jakemgold9 months ago

Also: only happens when a second, longer editor toolbar is open.

jakemgold9 months ago

Increases breakpoint to collapse admin toolbar by 45px

comment:4 jakemgold9 months ago

Attached a patch that increases the first break point to accommodate the width of the second toolbar

comment:5 jakemgold9 months ago

  • Keywords has-patch added

comment:6 follow-up: ocean909 months ago

  • Keywords has-patch removed

The ticket is about the editor, not the toolbar.

comment:7 in reply to: ↑ 6 ; follow-up: jakemgold9 months ago

Replying to ocean90:

The ticket is about the editor, not the toolbar.

Read the patch and notes above... The cause of the problem is the toolbar.

Last edited 9 months ago by jakemgold (previous) (diff)

comment:8 jakemgold9 months ago

  • Keywords has-patch added

comment:9 helen9 months ago

TinyMCE toolbar + admin menu :)

comment:10 in reply to: ↑ 7 ocean909 months ago

  • Milestone changed from Awaiting Review to 3.7

Replying to jakemgold:

Read the patch and notes above... The cause of the problem is the toolbar.

I'm sorry, just noticed that with toolbar you mean the admin menu and probably the toolbar of TinyMCE.

comment:11 jakemgold9 months ago

No problem. However - any reason to hold such a small patch for 3.7?

(Disregard: Helen corrected my ignorance on timing. :-) )

Last edited 9 months ago by jakemgold (previous) (diff)

comment:12 helen9 months ago

#24719 was marked as a duplicate.

comment:13 helen9 months ago

Been digging into this, because I specifically remember it getting fixed once upon a time. According to #19434, the minimum width is about 950px, but for some reason it's now 900 after [20749] when it moved from JS to CSS. azaozz - any reason why it's not 945-950 or so?

comment:14 helen9 months ago

  • Cc azaozz added

comment:15 azaozz9 months ago

...any reason why it's not 945-950 or so?

Thinking we should review the trigger width for switching from two columns to one on the Edit Post screen. The user can disable folding the menu so switching to one column should probably happen earlier.

Last edited 9 months ago by azaozz (previous) (diff)

comment:16 alexvorn29 months ago

  • Cc alexvornoffice@… added

comment:17 helen8 months ago

#25004 was marked as a duplicate.

comment:18 vinod dalvi8 months ago

The patch / wp-admin-css-breakpoint-toolbar.patch​ does not fix bug properly and breaks on browser window size 968px X 768px.

comment:19 vinod dalvi8 months ago

  • Cc mozillavvd@… added

melchoyce7 months ago

comment:20 melchoyce7 months ago

23904.diff changes the breakpoint to 950px.

comment:21 nacin7 months ago

  • Keywords commit added

Seems good, can anyone confirm?

comment:22 vinod dalvi7 months ago

The patch http://core.trac.wordpress.org/attachment/ticket/23904/23904.diff breaks in between viewport size 951px to 958px.

The new patch( 23904.2.patch​ ) added to fix it.

Last edited 7 months ago by vinod dalvi (previous) (diff)

vinod dalvi7 months ago

comment:23 ocean907 months ago

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

In 25688:

Post UI: Increase the trigger width for switching from two columns to one.

props melchoyce, vinod dalvi.
fixes #23904.

Note: See TracTickets for help on using tickets.