n8design/htwoo

Incorrect hoo-dlg sidebar height on mobile devices

Closed this issue · 4 comments

gabbsmo commented

Describe the bug
The hight of sidebar dialogs is too high in the case of browsers where the chrome overlays the viewport. This is very common on touch devices.

To Reproduce
Steps to reproduce the behavior:

  1. Create a .hoo-dlg.sidebar.right
  2. Fill it up with content
  3. The last content will be covered by the browser chrome at the bottom

Expected behavior
Sidebar dialogs should have the same height as the visible viewport.

Smartphone (Android)

  • Device: Samsung Galaxy S20
  • OS: Android 13
  • Browser: Samsung Internet
  • Version: 25

Smartphone (Apple)

  • Device: iPhone 15
  • OS: iOS 17
  • Browser: Safari

Additional context
One recommendation is to use height: 100% together with position: fixed, rather than height: 100vh. See Chrome for Developers.

My workaround:

.hoo-dlg.sidebar {
    position: fixed;
    height: 100%;
}
StfBauer commented

100% most of the case is not reliant. I only had support in the dialogs for vw, vh.

I added now the more common and better useable viewport height and widht using svw and svh.
Which will give you the smalles view port that matches the quasi "real browser" window.

gabbsmo commented

That looks cleaner indeed. Please let me know when it is on npm and I will see if I can remove my workaround. Thanks!

gabbsmo commented

In my scenario the sidebars are sometimes stacked on top of eachother and/or are scrollable. I find that postion: fixed; height: 100%; works better in my case.

1: Without postion: fixed, the scrollbar will push the content to towards the center of the viewport, on Windows for example. Different browsers have the scrollbars either overlapping or to the side.
2: Without postion: fixed; height: 100%;, overlaying sidebar may get less height than the one below when stacking them.