Floating bar was blocked in Mobile view

[wenyongqd]

In Pad/Phone set, the floating bar will be blocked by the integrated floating bar, how to make the Pad/Phone's floating bar showing on the bottom, or some other way to fix this problem?

[12joan]

Testing on my iPad, here's what I've found.

The first time selecting the word "content" after refreshing the page, Plate's toolbar isn't visible and the iOS toolbar is above the selection, as in your screenshot. Testing using Safari's web inspector on a connected macOS device indicates that Plate's toolbar is positioned approximately 360px (the same height as the software keyboard) lower than it should be, and so is obscured by the keyboard.

The issue resolves itself when manually closing the software keyboard, reopening it, and reselecting the text. After doing this, Plate's toolbar is correctly positioned above the selection, and iOS has intelligently placed its toolbar below the selection.

On iOS, both toolbars are positioned correctly first time for me.

Here's some further reading on the subject of floating toolbars and mobile devices:

• Balloon Toolbar visually fights with iOS selection menu #2480
• Mobile Menu Bubble ueberdosis/tiptap#55
• Tested on iOS? ueberdosis/tiptap#37

[wenyongqd]

Yes, reopening the keyboard could solve this issue, but only in editing mode, not viewing mode.
Would changing the height of the floating bar resolve this issue?

[12joan]

I'm not sure how changing the height of the floating toolbar would help. Can you upload a screen recording of the issue you're seeing in viewing mode?

[wenyongqd]

RPReplay_Final1704329223.MP4

[12joan]

Thanks for demonstrating the problem. It looks like one workaround is to tap on the selected text, which closes the iOS toolbar but leaves the Plate toolbar open. If you want to fix this on your app, the simplest solution would be to make the toolbar appear below the selection (which you can do easily since it's just a Radix UI component that lives in your app's code).