Need help to style a card-mod horizontal stack

Configuration Frontend
1

Hi,

I am trying to centre my items in a horizontal stack card using card-mod, but seems like I am doing something wrong. I understand that the element is inside shadow dom, but unable to figure out the way to style it. Here is a screen shot of the element dom

mod-card
mod-card794Ă—324 35.8 KB

and here is my styling code:

cards:

      - type: "custom:mod-card"
        card_mod:
          style: |
            ha-card {
              border-style: solid;
              border-color: red;
              border-width: 2px;
              background-color: white;
              //margin-left: 55px;
              width: 100%;
              align-self: middle;
              justify-self: middle;
              -webkit-justify-content: center;
            }
            
        card:

          type: horizontal-stack
          card_mod:
            style: |
              $hui-horizontal-stack-card:
                $: |
                  #root {
                    justify-content: center;
                  }

Kindly help.

2

Looks like card_mod doesn’t support styling horizontal-stack directly:

NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.

But wrapping horizontal stack with mod-card seems to be working:

- type: custom:mod-card
  style: 
    hui-horizontal-stack-card$: |
      #root { 
        justify-content: center;
      }
  card:
    type: horizontal-stack
    cards:
      - ...
5 Likes
3

Thanks for the answer, it does work! However I also realised why it was not working for me. it seems I had a “card_mod” style along with the above in the same code and they don’t seem to work to gether. So, I changed my code from this:

 - type: "custom:mod-card"
        card_mod:
          style: |
            ha-card {
              width: 100%;
              align-self: middle;
              justify-self: middle;
            }
        style:
          hui-horizontal-stack-card$: |
            #root { 
              justify-content: center;
            }
            
        card:

          type: horizontal-stack
          cards:

to the below:

- type: "custom:mod-card"
        style:
          hui-horizontal-stack-card$: |
            #root { 
              justify-content: center;
            }
            
        card:

          type: horizontal-stack
          cards:

and voila! it works :slight_smile: