Horizontal-Stack width too much on Phone App

Configuration Frontend
1

Hello Community,

I created a new Horizontal-Stack with a few Button-card in it.

Web:

image
image1651Ă—891 245 KB

IOS App:

image
image1242Ă—2208 194 KB

    cards:
      - type: 'custom:button-card'
        size: 50%
        entity_picture: /local/plex.svg
        color_type: card
        color: '#282a2d'
        show_name: true
        name: Plex
        show_entity_picture: true
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.samsung_tv_remote
            source: Plex
        styles:
          card:
            - height: 70px
            - width: 75px
          name:
            - font-family: Impact
            - letter-spacing: 0.1em
            - color: white
            - font-size: 13px
      - type: 'custom:button-card'
        size: 50%
        entity_picture: /local/netflix.svg
        color_type: card
        color: black
        show_entity_picture: true
        show_name: true
        name: Netflix
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.samsung_tv_remote
            source: Netflix
        styles:
          card:
            - height: 70px
            - width: 75px
          name:
            - font-family: Impact
            - letter-spacing: 0.1em
            - font-size: 13px
      - type: 'custom:button-card'
        size: 50%
        entity_picture: /local/spotify.svg
        color_type: card
        color: '#1DB954'
        show_name: true
        name: Spotify
        show_entity_picture: true
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.samsung_tv_remote
            source: Spotify – Zenék és podcastok
        styles:
          card:
            - height: 70px
            - width: 75px
          name:
            - font-family: Impact
            - letter-spacing: 0.03em
            - color: white
            - font-size: 13px
      - type: 'custom:button-card'
        size: 65%
        entity_picture: /local/youtube.svg
        color_type: card
        color: null
        show_name: true
        name: YouTube
        show_entity_picture: true
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.samsung_tv_remote
            source: YouTube
        styles:
          card:
            - height: 70px
            - width: 75px
          name:
            - font-family: Impact
            - color: '#282828'
            - font-size: 13px
      - type: 'custom:button-card'
        size: 45%
        entity_picture: /local/sat-dot-1.svg
        color_type: card
        color: '#8F8F8F'
        show_name: true
        name: TV
        show_entity_picture: true
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.samsung_tv_remote
            source: TV
        styles:
          card:
            - height: 70px
            - width: 75px
          name:
            - font-family: Impact
            - letter-spacing: 0.1em
            - font-size: 13px
            - color: white
      - type: 'custom:button-card'
        size: 45%
        entity_picture: /local/playstation.svg
        color_type: card
        color: '#003791'
        show_name: true
        name: Playstation
        show_entity_picture: true
        tap_action:
          action: call-service
          service: media_player.select_source
          service_data:
            entity_id: media_player.samsung_tv_remote
            source: HDMI
        styles:
          card:
            - height: 70px
            - width: 75px
          name:
            - font-family: Impact
            - font-size: 13px
            - color: white

What would be the easiest method to solve this issue?

Thank you very much,

2

Search for “Vertical Stack” on the documentation for your custom:button-card.

You can have two rows of icons instead of just one long row.

3

I know how Vertical Stack working, how would that correct my issue I dont understand, I dont want two rows, I just want one what is also changing to the width of my IOS app.

4

It’s really unclear what you want.
You’ve only mentioned what you don’t want, what about what you do want to accomplish?

5

Sorry my fault I saw I forgot to write in inside the topic. I created this horizontal stack what is looking perfectly on my Web browser but too wide for my IOS app, there is any method what is changing it always to the actual width? Thank you.

6

Issue is solved! I had to delete all the width and height changes and set all size to 50%, now the width changed to fill out one line perfectly on the phone too!

1 Like