Card-mod: not possible to reduce margin in button row entities card

Configuration Frontend
,
1

I’m trying to increase the font size of a button type entity row in an entities card. I can do this using the instructions from this post:

    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent;
          font-size: 150%
        mwc-button {
          color: red; 
          //this does not work
        }

However this results in the end of the button being cut off:
image

This appears to be because the margin for the mwc-button element is negative so when the text is long enough, it gets cut off on the right. I can fix this by increasing the margin of this element in the Inspector view (from -0.57em to -0.3em):

image
image822×71 14.8 KB

The trouble is that I can’t figure out how to target this element in card-mod. As you can see above, I have tried targeting it like I would expect it to work but it hasn’t changed the button. Changing the margin also doesn’t do anything here.

I assume this must be possible maybe with nested styles as I’ve seen done in other posts. Weirdly this doesn’t seem to be a problem in the thread linked above. Any pointers would be appreciated.

2

You can apply individual entity styles at the card level, but you need to go through the shadow roots to do it. Depending on your version of card_mod, that could raise the issue of only styling the first row of its type on the card if you don’t get the format just right.

Probably easier to apply your style at the entity level:

- type: entities
  card_mod:
    style: |
        ha-card {
          --ha-card-background: transparent;
          font-size: 150%;
        }
  entities:
    - type: button
      card_mod:
        style: |
          mwc-button {
            margin-right: -0.3em !important;
          }
      entity: <your button entity>
      name: Counter
      action_name: increment

The !important is needed to guarantee it overrides the default setting.

Not 100% sure that simply changing the right margin is the best way to scale up here - people with more CSS wisdom might advise about that, but in principle this is how you would apply any styles at the entity level.

3

Amazing thanks so much! I didn’t realise there was a difference between applying the card-mod at the entity level vs the card level. Is there an explanation as to why this modification doesn’t work at the card level? Applying at the entity level with the !important marker works for my purposes.

I may have not been clear but the name font is scaled up with

        ha-card {
          --ha-card-background: transparent;
          font-size: 150%
        }

My first image is with the font already increased to 150% but then it pushes the text off. I’m not 100% sure this is the correct solution to the text falling off the edge of the card but it seems to work in this case to bring it back.

Thanks for your help!

4

It’s all about DOM navigation.

Here’s how you would style your entity at card level, but note this is not the recommended route, unless there really aren’t alternatives:

- type: entities
  card_mod:
    style:
      hui-button-row $ div.flex: |
        mwc-button {
          margin-right: -0.3em !important;
        }
      .: |
        ha-card {
          --ha-card-background: transparent;
          font-size: 150%;
        }
  entities:
    - type: button
      entity: <your button entity>
      name: Counter
      action_name: increment

Essentially, you start at the deepest level you can go from the top (the top usually being ha-card if that element exists), then each time you meet a shadow-root, you add a $ sign.

Prior to card-mod version 3.4, I believe this would only style the first button row of its kind on the entities card. To style each button row, you would need to format each step through the DOM on a new indented yaml row. You would also need to do the same for each distinct type of entity on the card. All together that would also add empty card-mod styles at every level, increasing CSS overhead, and potentially slowing down page loads.

Incidentally, if you keep the style with the enttity, it also has the advantage of staying with the entity should you start moving stuff around. If you do it all at card level, you might easily forget if you add or change entities on the card.

1 Like
5

Wow, I clearly have some to learn about that. I had kind of just been stumbling through card-mod at the moment, really only using it for making transparent backgrounds or grid layouts. I will read into those docs about DOM navigation to make sure I’m not doing this incorrectly before I get too deep!

Thanks for the help :slight_smile:

1 Like