Opened 7 years ago

Closed 7 years ago

#9769 closed Bug (fixed)

Horizontal scroll on Webkits when floating toolbar doesn't fit in viewport

Reported by: Piotrek Koszuliński Owned by: Olek Nowodziński
Priority: Normal Milestone: CKEditor 4.0.1
Component: UI : Toolbar Version: 4.0
Keywords: Webkit Cc:

Description (last modified by Piotrek Koszuliński)

On FF toolbar is resized to fit. In fact this isn't perfect solution too, because toolbar layout is changed (and therefore is different than for editor in left/right column), what may be confusing for users and doesn't look very well. I think that it should be aligned to right/left side of the viewport.

Attachments (3)

chrome_scroll.png (117.0 KB) - added by Piotrek Koszuliński 7 years ago.
chrome_toolbar.png (106.2 KB) - added by Piotrek Koszuliński 7 years ago.
floatingspacePinModeXpos.ogv (1.4 MB) - added by Olek Nowodziński 7 years ago.

Download all attachments as: .zip

Change History (14)

Changed 7 years ago by Piotrek Koszuliński

Attachment: chrome_scroll.png added

comment:1 Changed 7 years ago by Piotrek Koszuliński

Description: modified (diff)

comment:2 Changed 7 years ago by Frederico Caldeira Knabben

Status: newconfirmed

Correct. It should touch the right side of the viewport, but not cross it.

comment:3 Changed 7 years ago by Olek Nowodziński

Owner: set to Olek Nowodziński
Status: confirmedassigned

comment:4 Changed 7 years ago by Olek Nowodziński

Status: assignedreview

Proposed the t/9769 fix for all browsers that keeps the floating space visible for as long as possible when scaling-down the window by attaching it to the opposite side of the viewport.

I also revisited and commented existing code since tapeworms like this:

var newLeft = alignSide == 'left' ? ( editorRect.left > 0 ? editorRect.left : 0 ) : ( editorRect.right < viewRect.width ? viewRect.width - editorRect.right : 0 );

are nothing like a extendable and understandable code.

comment:5 Changed 7 years ago by Piotrek Koszuliński

Status: reviewreview_failed

Toolbar opens outside the left border of the viewport. See screenshot.

Second issue - there's a difference between Chrome and FF (and probably other browsers). When viewport.width < toolbar.width on FF toolbar is resized, but on Chrome toolbar stays wide and is displayed outside right border (but it's reachable). We have to make a decision how that should work. Both options have pros and cons...

Changed 7 years ago by Piotrek Koszuliński

Attachment: chrome_toolbar.png added

comment:6 in reply to:  5 Changed 7 years ago by Frederico Caldeira Knabben

Replying to Reinmar:

Toolbar opens outside the left border of the viewport.

I agree... it should not cross the left boundary.

Second issue - there's a difference between Chrome and FF (and probably other browsers). When viewport.width < toolbar.width on FF toolbar is resized, but on Chrome toolbar stays wide and is displayed outside right border (but it's reachable). We have to make a decision how that should work. Both options have pros and cons...

That's another issue which should not block this ticket. For now, KISS and let's get focused on the position.

Changed 7 years ago by Olek Nowodziński

comment:7 Changed 7 years ago by Olek Nowodziński

Status: review_failedreview

comment:8 Changed 7 years ago by Olek Nowodziński

Extracted floating space resize issue to separate ticket #9832.

comment:9 Changed 7 years ago by Piotrek Koszuliński

Status: reviewreview_passed

comment:10 Changed 7 years ago by Olek Nowodziński

Rebased branch to the latest master.

comment:11 Changed 7 years ago by Olek Nowodziński

Resolution: fixed
Status: review_passedclosed
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy