Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Section Support #854

Open
oerix opened this issue Jun 5, 2024 · 18 comments
Open

Section Support #854

oerix opened this issue Jun 5, 2024 · 18 comments
Labels
FR Feature Request

Comments

@oerix
Copy link

oerix commented Jun 5, 2024

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

@oerix oerix added the FR Feature Request label Jun 5, 2024
@aLAN-LDZ
Copy link

aLAN-LDZ commented Jun 6, 2024

I found the solution, set horizontal stack

image

@guimatheus92
Copy link

I found the solution, set horizontal stack

image

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

image

@aLAN-LDZ
Copy link

aLAN-LDZ commented Jun 7, 2024

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

@guimatheus92
Copy link

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:

image

The section support is still needed.

@aLAN-LDZ
Copy link

aLAN-LDZ commented Jun 7, 2024

yes I agree, I only provided a temporary solution

@Kanecaine
Copy link

Kanecaine commented Jun 11, 2024

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):

Bildschirmfoto 2024-06-12 um 00 21 20

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
Copy link

esand commented Jul 4, 2024

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
Copy link

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
Copy link

esand commented Jul 19, 2024

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
Copy link

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
Copy link
Collaborator

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
Copy link

esand commented Jul 20, 2024

image
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
Copy link

Kanecaine commented Jul 20, 2024

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

IMG_0498

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
Copy link

esand commented Jul 21, 2024

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

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:
image
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
Copy link

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
Copy link

esand commented Jul 21, 2024

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:
image

Custom button in 2x3 with no size:
image

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
Copy link

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.

@gabriel403
Copy link

I found the solution, set horizontal stack

this worked for me, otherwise the card was taking up the full width

in this pic the top row is a horizontal stack and the below row is normal custom-button-card taking up the full width of the column
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FR Feature Request
Projects
None yet
Development

No branches or pull requests

8 participants