Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing phone orientation does not re-draw responsive toolbar #5618

Closed
jodator opened this issue Oct 17, 2019 · 7 comments
Closed

Changing phone orientation does not re-draw responsive toolbar #5618

jodator opened this issue Oct 17, 2019 · 7 comments
Labels
browser:android browser:ios package:ui resolution:expired This issue was closed due to lack of feedback. status:stale type:bug This issue reports a buggy (incorrect) behavior.

Comments

@jodator
Copy link
Contributor

jodator commented Oct 17, 2019

📝 Provide detailed reproduction steps (if any)

  1. Open some docs page with long toolbar in horizontal orientation
  2. Important scroll the content so the toolbar goes to the detached mode
  3. Turn your phone to horizontal

✔️ Expected result

Toolbar gets bigger

❌ Actual result

Toolbar stays the same as it was before (collapsed)

Selection_032

📃 Other details

  • Browser: Chrome
  • OS: Android
  • CKEditor version: latest master

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

@jodator jodator added type:bug This issue reports a buggy (incorrect) behavior. package:ui browser:android labels Oct 17, 2019
@Mgsy
Copy link
Member

Mgsy commented Oct 17, 2019

Works fine on iOS. (see #5618 (comment))

@jodator
Copy link
Contributor Author

jodator commented Oct 17, 2019

@Mgsy check the update - Important scroll the content so the toolbar goes to the detached mode.

@Mgsy
Copy link
Member

Mgsy commented Oct 17, 2019

Yep, I can confirm that it doesn't work when the toolbar is in the detached mode.

@oleq
Copy link
Member

oleq commented Oct 21, 2019

In general, it boils down to the fact that once in the detached mode, the toolbar will not react to changes in the size of the environment (both on mobile and on desktop).

This is the limitation of the ResizeObserver API. It triggers updates when the DOM element is actually ("physically") resized. When the toolbar becomes sticky, it gets position: fixed (AFAIR) and its dimensions become frozen. Being positioned that way, there's no parent/container that can affect its physical dimensions, this is how positioning works – you must use static values (like width or left and right).

When dimensions are static, there's no way for the ResizeObserver API to work because there are no resizes. To bypass this issue, we'd have to start observing the editable instead when the toolbar is floating around and update toolbar's dimensions to match the editable. It's doable but that's a complex logic – it partially overlaps with my proposal about enabling grouping for inline and balloon toolbars. We could extend it for a classic editor toolbar when sticky, let me know in the comments WDYT.

@jodator
Copy link
Contributor Author

jodator commented Oct 21, 2019

Probably a general solution would be better. I don't recall right now if we could/should listen to "orientation change" events only for mobile environments as this could also happen on flex layout.

So if anything from the #5597 would fix this (with some configuration, etc) I'm for this.

@mlewand mlewand added this to the unknown milestone Nov 18, 2019
@pomek pomek removed this from the unknown milestone Feb 21, 2022
@CKEditorBot
Copy link
Collaborator

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

@CKEditorBot
Copy link
Collaborator

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

@CKEditorBot CKEditorBot added the resolution:expired This issue was closed due to lack of feedback. label Nov 5, 2023
@CKEditorBot CKEditorBot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
browser:android browser:ios package:ui resolution:expired This issue was closed due to lack of feedback. status:stale type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
Development

No branches or pull requests

6 participants