Section Support

[oerix]

Would be great if you could add 'Section' support in the view. At the moment, we can't put cards side by side, only 1x1 using sections.

Thanks

[aLAN-LDZ]

I found the solution, set horizontal stack

[guimatheus92]

I found the solution, set horizontal stack

@aLAN-LDZ could you share your solution please? I am having the same issue on 1x1, because of card size:

[aLAN-LDZ]

use the horizontal stack as the base card and place the button card in it

[guimatheus92]

use the horizontal stack as the base card and place the button card in it

Yeah, but that is not set as individual card as a tile for example:

The section support is still needed.

[aLAN-LDZ]

yes I agree, I only provided a temporary solution

[Kanecaine]

I asked myself the same question and investigated the problem further. First i used normal tile card.

type: tile
entity: light.essen
vertical: true
layout_options:
  grid_columns: 4
  grid_rows: 2

With layout options you can define about how many colums and rows the card should span. 4 columns is actually the maximum per section. This leads to this (left side):

3 tile cards, the first spans all 4 columns, the second and third card are spanning 2 columns each.

Then i tried to achieve the same with the custom-button-card (right side in picture above). Here the layout options don't work. To get it right, i have to overwrite some css:

type: custom:button-card
entity: light.bad
layout_options:
  grid_columns: 4
  grid_rows: 2
card_mod:
  style: |
    :host {
      height: 100% !important;
      width: 100% !important;
    }
    ha-card {
      height: 100% !important;
      width: 100% !important;
    }

By setting width and height (i suppose setting height would be enough) to 100% the custom-button-card follows the specified layout options.

So there is a problem that the custom-button-card does not use all the available space of a section grid cell. Maybe the author could add an option e.g. "use_card_in_section: true" to overwrite the default behavior and setting the height to 100% by the card itself, so that card_mod is not neccessary.

[esand]

You can use the extra_styles attribute to define those custom styles without using card_mod. I've also figured out how to fix the space around the icon and let any text that should be below it have the proper spacing as well. The YAML below should give you a 1:1 for what regular button cards look like.

extra_styles: |
  :host,ha-card{height:100%!important}
  #container{height:inherit!important}
  #img-cell+*{margin-top:8px}

(Edited to update YAML to give identical rendering to regular button cards)

[tfoote000]

I was able to solve it, with dynamic section support, by adding a height style value to the card (see example). I found this height value from the .card.fit-rows class. With that, height value, you can use the layout_options.grid_columns and layout_options.grid_rows and it will dynamically size the button to the section.

type: custom:button-card
icon: mdi:warehouse
color_type: card
entity: <entity_name>
show_state: true
show_name: false
tap_action:
  action: call-service
  service: mqtt.publish
  data:
    qos: '2'
    topic: topic
    payload: FIRE
    retain: false
color: rgb(10, 162, 192)
state:
  - color: rgb(165, 173, 206)
    value: Complete
  - color: rgb(112, 166, 67)
    value: Ready
styles:
  card:
    - height: "calc((var(--row-size,1) * (var(--row-height) + var(--row-gap))) - var(--row-gap))"
layout_options:
  grid_columns: 1
  grid_rows: 1

Version Details: HA Core: 2024.7.2 Frontend: 20240710.0 Button-Card: 4.1.2

[esand]

styles:
  card:
    - height: "calc((var(--row-size,1) * (var(--row-height) + var(--row-gap))) - var(--row-gap))"

That seems to work better for a 1x1 grid with no name, but if you try to apply that to an icon with a name displayed in a x2 height or more grid, the name gets put all the way at the bottom. To fix it, it seems that you'd need something along the lines of this CSS:

#container {
    justify-content: center;
    display: flex;
    flex-direction: column;
}
#img-cell {
    height: 48px;
}
#img-cell + * {
    margin-top: 8px;
}

And #img-cell height needs to be the height you set for the icon size (I couldn't figure out if it's defined in a variable or not). I've got a testing dashboard set up for this, so if anyone comes up with more workarounds, I'm willing to see how it works.

[Kanecaine]

Sorry guys, i don’t get it.

(1) Calculating the height as @tfoote000 did, results in the same as setting the height to 100% via extra-styles. Cannot see any difference

(2) The styles for #container and #img-cell which have @esand mentioned: without them everything seems ok. With them a simple custom button card (as posted above from me - only type and entity declaration) is broken. The icon takes up the whole space and entity name is cropped.

Maybe you can give some images to illustrate what (1) and (2) should fix with a simple custom button card yaml?

[RomRider]

I'll have a look at this next week, in the meantime there should be a way to fix it with some styling config.

[esand]

In the image attached, from top left to right:

• Custom 2x2 button with name using the style card height from @tfoote000
• Custom 2x2 button with name using the extra_styles from @esand
• Standard 1x1 button w/o name
• Custom 1x1 button w/o name using the style card height from @tfoote000
• Custom 1x1 button with name using the style card height from @tfoote000
• Custom 1x1 button with name using the extra_styles from @esand

As you can see, @tfoote000's fix works well for 1x1 buttons, but when you go bigger with a name, the spacing is off. The issue seems to just be with the computed height of the svg image. using @tfoote000's stuff it seems that it takes the max height which throws off the alignment to any text elsewhere - but for only an icon it will look fine.

[Kanecaine]

Hey, thanks for the examples. But i cannot confirm the false alignment - please look at this:

On the right side there a 1x1 and 2x2 square, left 2x3 and 2x1

• green: calculating height (tfoote000)
• orange: my origin 100% height using card mod
• red: 100% height using extra styles (esand)

These are all custom button cards with nothing more than this:

type: custom:button-card
entity: light.bad
layout_options:
  grid_columns: 2
  grid_rows: 3
styles:
  card:
    - border: 2px solid red
    #setting the height to 100%
extra_styles: |
#alternative setting the height to 100%

[esand]

@Kanecaine for reference, this is a regular button card with name displayed (2x2 grid):

And... I think you have something else loaded that is impacting those cards you posted if you're saying there's no extra styles being applied, because this is what I see when creating a pretty simple custom button with no extra styles: The red circled area is blank, but it shouldn't be there - it's unconsumed space by the card which I've set to be 3 rows high (it clearly isn't).

These are the issues that others are pointing out - cards aren't taking full height to be properly sized and icon/text positioning is impacted as well.

[Kanecaine]

Sorry for the misunderstanding. When I wrote “with nothing more than this” i meant: this and the styles / extra-styles previously discussed. I edited my previous post to clarify that. To make it short: the height is not calculated correctly when using the custom button card in sections. We agree on that. Hence the previous discussion about which height specification is “the best”. I can't see any difference in all 3 variants of setting the height to 100%. All 3 solve the problem for me. The goal is that these additional height specifications are not necessary.

However, I cannot understand the problem with the shifted text. I see that you also have “size: 48px” in your card config. Maybe that is the cause. So far no one else has expressed this problem with the text here.

I think we should wait until Jerome has had a look at it.

[esand]

However, I cannot understand the problem with the shifted text. I see that you also have “size: 48px” in your card config. Maybe that is the cause. So far no one else has expressed this problem with the text here.

The problem with the text is that, compared to a regular button, the text appears too low (there's too much vertical space between the icon and the name) and I've been trying to fix it.

Without size specified, width of 100% gets used and you don't notice the issue when the layout grid is a square (1x1, 2x2, 3x3). As soon as the layout has more vertical space (1x2, 2x3) the issue is apparent and you can see that there's excessive space between the icon and the name when displayed compared to a "normal" button. You can also force the issue to appear on square layouts by specifying an icon size (as I have done) where the icon size is smaller than the grid square (so 48px is a smaller icon size that causes the effect to be visible in just a 2x2 grid).

Does that explain it? If you use devtools in Chrome/Edge and inspect the icon, you should see the difference... Regular button in 2x3 with no size:

Custom button in 2x3 with no size:

You even have the issue in your screenshots - your biggest button with the green border and the slightly smaller one with a red border have it visible... the "Bad" text should not be so low down in that card; it should be up along with the light icon and both should be centered in the card itself.

[Kanecaine]

Thank you for the detailed explanation. I haven't tried to reproduce it, but now I understand what you mean. Seems to be a consequence of the fact that we are now stretching the card to 100%, a consequential error so to speak.