[FR] Disable vertical scrolling?" #328

Jaxel · 2025-01-01T19:40:17Z

Can we get an option to disable scrolling on a dashboard?

elchininet · 2025-01-02T07:26:05Z

Hi @Jaxel,
What would be the use case of that request? Is it not enough to avoid putting too many elements in that dashboard to avoid the vertical scrolling?
Regards

Jaxel · 2025-01-02T11:28:21Z

It's hard to explain in text what's happening here, so I made some videos:

And here is a longer video explaining the exact HTML/CSS issue:
https://www.youtube.com/watch?v=xzJ2rAnEv08

elchininet · 2025-01-02T17:10:26Z

It's hard to explain in text what's happening here, so I made some videos:
And here is a longer video explaining the exact HTML/CSS issue:
https://www.youtube.com/watch?v=xzJ2rAnEv08

Thanks @Jaxel, it is clear now.
That falls out of the scope of the plugin. Instead of trying to add an option to resolve your specific use case, let's try to triage from which place is your issue coming. I cannot reproduce it in the Docker demo, so I suspect that it is coming from your theme or something that you have set up. Let's try to rule out things, are you using a theme or you are using the default Home Assistant theme?

Jaxel · 2025-01-02T17:17:35Z

Default theme. Only happens when Kiosk mode is enabled.

elchininet · 2025-01-02T17:21:36Z

Default theme.

Perfect, let's keep ruling out things, could you tell me which layout you are using?

Only happens when Kiosk mode is enabled.

It makes sense, because in kiosk-mode there is no header 🙂

But as the Docker demo is a Home Assistant instance without anything else installed but kiosk-mode it is the perfect place to reproduce things. If it is not happening there by default, then the way to go is to try to reproduce your set up to detect what is causing the issue.

Jaxel · 2025-01-02T17:24:03Z

It also only happens on my Samsung A9+ tablets. Doesn't happen on my cell phone.

elchininet · 2025-01-02T17:26:07Z

It also only happens on my Samsung A9+ tablets

I have a Galaxy Tab A8 so maybe I can reproduce it there, let me know which layout you are using to build something similar to yours.

Jaxel · 2025-01-02T17:28:05Z

It's a YAML layout.

Jaxel · 2025-01-02T17:31:51Z

I have HACS with card-mod, Spook, and Paper Buttons Row installed. That's it.

elchininet · 2025-01-02T17:34:05Z

It's a YAML layout.

I don't mean that. In a dashboard, each view can have a layout (Sections, Masonry, etc). Looking at your screen it could be a Masonry one but I am not sure.

Jaxel · 2025-01-02T17:35:02Z

YAML layouts are masonry.

elchininet · 2025-01-02T17:43:10Z

YAML layouts are masonry.

I think that you don't get what I am asking, this is one of the dashboards in the Docker demo, all the dashboards are written in YAML:

kiosk_mode:
  hide_header: true
title: Kiosk-mode hide header
views:
  - theme: Backend-selected
    title: Hide Header
    path: kiosk-mode-hide-header
    badges: []
    cards:
      - type: markdown
        content: This dashboard has the setting `hide_header` on `true`.

But I can set up the layout in the view if I want:

kiosk_mode:
  hide_header: true
title: Kiosk-mode hide header
views:
  - theme: Backend-selected
    title: Hide Header
    path: kiosk-mode-hide-header
    badges: []
    cards:
      - type: markdown
        content: This dashboard has the setting `hide_header` on `true`.
    type: xxx ## <--- here is set up the layout (e.g. sections)

Let me know if you are using any layout.

Jaxel · 2025-01-02T17:51:12Z

kiosk_mode:
  kiosk: true

views:
  - title: Overview
    path: overview
    cards:
      - !include overview-column-1.yaml
      - !include overview-column-2.yaml
      - !include overview-column-3.yaml

YAML layouts are Masonry by default.

elchininet · 2025-01-02T17:55:30Z

YAML layouts are Masonry by default.

There are no such thing as "YAML layouts" 🙂

I think that you mean that you use YAML mode instead of storage mode, but that doesn't define the layout of a view. Looking at your code you don't have any layout set up, so it is Masonry in that case as in the docker demo. Could you post the code of the view in which you have your cameras? In that way I can set up a similar one in the docker demo.

Jaxel · 2025-01-02T17:56:50Z

kiosk_mode:
  kiosk: true

views:
  - title: Cameras
    path: cameras
    theme: cameras
    cards:
      - !include cameras-column-1.yaml
      - !include cameras-column-2.yaml
      - !include cameras-column-3.yaml

cameras-column-1.yaml

type: vertical-stack
cards:
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
    
  - type: picture-entity
    entity: camera.door_bell_porch
    camera_image: camera.door_bell_porch
    camera_view: live
    aspect_ratio: "3:4"
    show_state: false
    show_name: false
    tap_action: none

cameras-column-2.yaml

type: vertical-stack
cards:
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
    
  - type: heading
    icon: mdi:home-outline
    heading: Camera @Driveway
    
  - type: picture-entity
    entity: camera.camera_driveway
    camera_image: camera.camera_driveway
    camera_view: live
    aspect_ratio: "16:9"
    show_state: false
    show_name: false
    tap_action: none
    
  - type: picture-entity
    entity: camera.camera_garage
    camera_image: camera.camera_garage
    camera_view: live
    aspect_ratio: "16:9"
    show_state: false
    show_name: false
    tap_action: none
    
  - type: heading
    icon: mdi:car-outline
    heading: Camera @Garage

cameras-column-3.yaml

cards:
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
  - type: heading
    
  - type: heading
    icon: mdi:pool
    heading: Camera @Patio
    
  - type: picture-entity
    entity: camera.camera_patio
    camera_image: camera.camera_patio
    camera_view: live
    aspect_ratio: "16:9"
    show_state: false
    show_name: false
    tap_action: none
    
  - type: picture-entity
    entity: camera.camera_living_room
    camera_image: camera.camera_living_room
    camera_view: live
    aspect_ratio: "16:9"
    show_state: false
    show_name: false
    tap_action: none
    
  - type: heading
    icon: mdi:theater
    heading: Camera @Living Room

elchininet · 2025-01-02T17:57:34Z

Perfect, let me try to set up something similar.

elchininet · 2025-01-02T18:10:39Z

I cannot reproduce it, either in the browser or in my Galaxy Tab A8 🙁

Could you open that view in your browser and let me know if it occurs there?

kiosk-mode.mp4

Jaxel · 2025-01-02T18:20:46Z

Upon further testing, I can confirm it only happens when using the Home Assistant Companion app in FULL SCREEN mode... The reason it doesn't happen on my cell phone is that I don't use it in full screen mode there.

elchininet · 2025-01-02T18:33:14Z

Upon further testing, I can confirm it only happens when using the Home Assistant Companion app in FULL SCREEN mode... The reason it doesn't happen on my cell phone is that I don't use it in full screen mode there.

Oh, that is a good finding. I'll try to simulate it and I will try to check if something can be done to avoid that behavior. I'll update you with anything that I find.

Jaxel · 2025-01-02T18:46:15Z

More testing. I installed the Fully Kiosk Browser APK. Same exact issue with full screen mode.

elchininet · 2025-01-02T18:48:45Z

More testing. I installed the Fully Kiosk Browser APK. Same exact issue with full screen mode.

Weird, that is the APK that I am using in my tablet. I will check with full-screen mode first, I'll let you know.

elchininet · 2025-01-02T21:21:14Z

Hi @Jaxel,

No success trying to reproduce it. Let's do the things different because maybe it is something coming from the device and that is why I cannot reproduce it. Follow the next steps in your device:

Go to Settings > Companion App > Debug > WebView Remote Debug and activate it
Use Chrome Remote Debugging to connect to your device: https://developer.chrome.com/docs/devtools/remote-debugging
Open chrome://inspect/#devices
Inspect the WebView relative to Home Assistant
First of all, in Application > Storage, uncheck Local and Session Storage and Cookies and click on Clear Site Data. In this way, we ensure that you are using the latest kiosk-mode version and not a version in cache.
Then, on your computer in the debug tools try to locate the hui-view-container element and check the styles of that element to see if the style for the height is there or it is overridden by some other styles
If that style is OK just dig around among all the elements to see if you can identify what is adding that height

Jaxel · 2025-01-02T21:34:46Z

That helped me figure out what was causing the scroll... It's the HACS card Paper Buttons Row.

<paper-buttons-row-action-handler style="position: absolute; width: 100px; height: 100px; transform: translate(-50%, -50%); pointer-events: none; z-index: 999;"><mwc-ripple></mwc-ripple></paper-buttons-row-action-handler>

This element is placed at the bottom left of the page in an absolute position BEFORE the header is removed by Kiosk Mode.

Jaxel · 2025-01-02T21:36:43Z

This issue appears to have been reported on the Paper Buttons Row github:
jcwillox/lovelace-paper-buttons-row#125
jcwillox/lovelace-paper-buttons-row#196

elchininet · 2025-01-02T21:39:22Z

This element is placed at the bottom left of the page in an absolute position BEFORE the header is removed by Kiosk Mode.

That is why I could not reproduce it, I don't have Paper Buttons Row installed. Do you know what is the function of that element in Paper Buttons Row? You can try to move it to another place using card-mod.

Jaxel · 2025-01-02T21:41:42Z

I just edited the JS and applied a display: none to the element and all is fixed.

elchininet · 2025-01-02T21:44:49Z

I just edited the JS and applied a display: none to the element and all is fixed.

Well, that is also a quick fix, the only drawback is that it will go away if you update the plugin. :)

Anyway, glad that it is already solved.

elchininet · 2025-01-03T21:52:19Z

Hi @Jaxel,
Closing this one.
Regards

Jaxel added the ✨ feature-request label Jan 1, 2025

elchininet closed this as completed Jan 3, 2025

elchininet added invalid This doesn't seem right and removed ✨ feature-request labels Jan 15, 2025

Uh oh!

[FR] Disable vertical scrolling?" #328

[FR] Disable vertical scrolling?" #328

Comments

Jaxel commented Jan 1, 2025

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

Jaxel commented Jan 2, 2025

Uh oh!

elchininet commented Jan 2, 2025

Uh oh!

elchininet commented Jan 3, 2025

Uh oh!

elchininet commented Jan 2, 2025 •

edited

Loading

Jaxel commented Jan 2, 2025 •

edited

Loading

Jaxel commented Jan 2, 2025 •

edited

Loading