lovelace-mushroom
lovelace-mushroom copied to clipboard
[Bug]: bigger size of mushroom card in sections type of dashboard
Requirements
- [X] I checked the troubleshooting section in the README to verify that I have the latest Mushroom version.
- [X] I did a search to see if there is a similar issue or if a pull request is open.
- [X] I have read the state of card mod support (in pin issues) and understand card mod support is not provided in this repository.
Current Behavior
I use Mushroom cards for quite a while. With HA 2024.3 release I wanted to take a look at their new type of dashboard ("sections"). Updated Mushroom cards to v3.5.2 and started copying items.
Things work as expected but sizes differ in a visible way. I do not know is it HA fault or Mushroom cards.
Masonry type of dashboard:
Sections type of dashboard:
Expected Behavior
I would rather expect the same size. But 'sections' dashboard type is marked as experimental so probably this is the reason.
Steps To Reproduce
- create 'sections' dashboard
- add Mushroom card
- compare with same card on 'masonry' dashboard
Context
YAML state
Environment
- Browser: Firefox
- HA Version: 2024.3.0
- Mushroom: v3.5.2
Anything else?
No response
Same issue for me. It is most visible when using two chips-stacks below each other.
Seeing the same with HA 2024.3 + Mushroom 3.5.2 and sections layout.
It looks like in the sections layout, there is a parent div
wrapper around the mushroom card container, which has a fit-rows
and a card
class applied to it. That selector defines only one attribute: height
.card.fit-rows {
height: calc((var(--row-size, 1)*(var(--grid-row-height) + var(--grid-gap))) - var(--grid-gap));
}
When this style is disabled in dev tools, the card renders as expected, and same as in the masonry layout.
@ptashek I fixed your issue with when using multiline_secondary
options with https://github.com/piitaya/lovelace-mushroom/pull/1402.
It's available in 3.5.4 release.
@hrw The sections view is still experimental and cards are forced to fit the grid for now so it's not a Mushroom issue. As I'm working in the HA front-end team, I can tell you that we are thinking about a way to resize card using the UI.
For now, using this yaml code on the card should fix your issue.
layout_options:
grid_rows: auto
@piitaya your suggestion about the grid rows, would this also fix the gap we now have while using chips and the new sections layout? cfr example below. Because adding
card_mod:
style: |
ha-card {
margin-bottom: -66px;
}
to the chips card has no effect.
But I do not understand your ayout_options
suggestion, where and how should this be added?
i have the same issue
i found a hacky way to fix it by going into developer tools and override the
--row-height
variable to 33px on the .container
element that contains the chip cards but i havent found a way to fix this using the card mod (because it's outside the mushroomcard element)
the result
Maybe correlated with the fact that the card do not fill orizontally the column even if "fill container" is selected?