lovelace-header-cards icon indicating copy to clipboard operation
lovelace-header-cards copied to clipboard

Odd behaviour when usied in narrow (phone) screen

Open sesquipedality opened this issue 2 years ago • 3 comments

I would like the header cards to hide themselves when there is not enough vertical room to show them. Unfortunately instead they shrink the menu tabs so that they are not visible. Is there any way to have a configuration option that gives preference to the view tabs in constrained situations.

sesquipedality avatar Apr 01 '22 23:04 sesquipedality

I would be very interested in this as well.

FsxShader2012 avatar Apr 03 '22 13:04 FsxShader2012

I found a way to circumvent this behaviour. Take a look at the State-Switch and Blank Cards. In this example I used the browser width to determine if header cards should be shown:

header_cards:
  cards:
    - type: custom:state-switch
      entity: mediaquery
      states:
        '(min-width: 1500px)':
          type: markdown
          content: "Test"
        all:
          type: custom:blank-card      #Blank-Card because you need to define a type

You could also use Browser Mod to decide on a device basis.

FsxShader2012 avatar Apr 08 '22 14:04 FsxShader2012

I found a way to circumvent this behaviour.

Thanks, I used the custom:state-switch with the user entity option. Works great!!!

erkr avatar Jun 22 '24 11:06 erkr