Floating toolbar gets covered by native toolbar on text selection in android

outline / rich-markdown-editor

The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:

https://www.getoutline.com

BSD 3-Clause "New" or "Revised" License

2.87k stars 592 forks source link

Floating toolbar gets covered by native toolbar on text selection in android #462

Closed drishit96 closed 3 years ago

drishit96 commented 3 years ago

Floating toolbar gets covered by native toolbar on text selection in android

To Reproduce Step to reproduce the behavior:

Select any text in the editor

Expected behavior The floating toolbar should be fully visible

Version 11.9.1

Screenshots toolbar

Smartphone (please complete the following information):

Device: Nokia 5.1 Plus
OS: Android 10
Browser: Chrome
Version: 91.0.4472.77

tommoor commented 3 years ago

@drishit96 any thoughts on how other apps on Android handle this?

drishit96 commented 3 years ago

In Notion, the android app handles this beautifully by showing a toolbar atttached to the top of the keyboard (or at the bottom of the page). notion_ss

However, their web app (on android) doesn't show any kind of toolbar at all, which is kind of weird because on desktop it shows a similar floating toolbar like outline.

tommoor commented 3 years ago

A bottom-fixed toolbar came to mind for me too, if there's a reliable way to position this (there should be!) then I think this would be a good improvement for mobile across all platforms. It would also be easier to reach closer to the bottom of the screen like the keyboard itself.

drishit96 commented 3 years ago

I think positioning the toolbar using position: fixed; bottom: 0 should work.