Changing phone orientation does not re-draw responsive toolbar

[jodator]

📝 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)

📃 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.

[Mgsy]

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

[jodator]

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

[Mgsy]

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

[oleq]

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]

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.

[CKEditorBot]

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]

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).