search

jcwillox / lovelace-paper-buttons-row

Adds highly configurable buttons that use actions and per-state styling.
MIT License
301 stars 10 forks source link

paper-buttons-row-action-handler needs initial "display:none" #196

Open StephanSchuster opened 2 weeks ago

StephanSchuster commented 2 weeks ago

The problem

When loading the first page/view which uses lovelace-paper-buttons-row, the <paper-buttons-row-action-handler ...> is added to the DOM at the end. Its initial styles are defined here:

https://github.com/jcwillox/lovelace-paper-buttons-row/blob/51525db3a22e8ff1f2e39b67c79cba7380259d4f/src/action-handler.ts#L83

As of now, there is no display: none. The latter gets added on the first call of stopAnimation (e.g. after first button press):

https://github.com/jcwillox/lovelace-paper-buttons-row/blob/51525db3a22e8ff1f2e39b67c79cba7380259d4f/src/action-handler.ts#L276

Until then, the <paper-buttons-row-action-handler ...> is visible on top of the DOM and causes an overflow on views with full height, e.g. grid-layout. This results in dashboard views being scrollable (bad UX) until stopAnimation is called the first time.

Would be happy if you could simple add "display: none" to the initial style. That fixes the problem.

What version of Paper Buttons Row has the issue?

2.2.0

What version of Home Assistant are you running?

2024.10.1

What version of the Frontend are you running?

20241002.2

Example YAML snippet

No response

Anything in the logs that might be useful for us?

No response

Additional information

No response

StephanSchuster commented 2 weeks ago

Just saw my own comment from earlier: https://github.com/jcwillox/lovelace-paper-buttons-row/issues/125#issuecomment-1664700299

Anyways, problem is still there. Would be happy if you could release a fix in one way or the other.

Tee86 commented 2 days ago

Just saw my own comment from earlier: #125 (comment)

Anyways, problem is still there. Would be happy if you could release a fix in one way or the other.

Hi Stephan, Do I understand it right, have you got a workaround for this issue? What do I need to do? It's a great card, but it is exactly as you said. It literally destroys the whole dashboard if the dash is meant to be full screen grid layout.... :(

StephanSchuster commented 1 day ago

@Tee86: Until this gets fixed by the author, I made the fix locally on both files (js+gz) in my HA installation. Basically, I added display: "none" between line 89 and 90 here https://github.com/jcwillox/lovelace-paper-buttons-row/blob/51525db3a22e8ff1f2e39b67c79cba7380259d4f/src/action-handler.ts#L89. Ensure that you do not see a cached version after you made the change.