I have a grid card that contains two bus time table entities cards, which are misbehaving a bit.
Iām trying to set the entities cards to a fixed height so that they donāt dynamically change height based on the number of times shown. Essentially I want the card to stay the same size, but the times should wrap onto a second column if they overflow. How can I achieve this?
Currently it looks like this if there are only a few times available. Note that the grid card is only holding the bus times, the temperature card is only shown for context.
Below is the css that targets the card. The height doesnāt fix the height of the card properly, how can I do that?
div#states.card-content {
width: 85%;
height: 185px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
@alto Itās not clear what you are trying to achieve as the final styling, but this is how you can target the area you just posted.
.card-content {
width: 85%;
height: 185px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
padding-bottom: 0px;
margin-bottom: -30px;
}
Can you double-check your quotings? Either have no quoting or the quote you are referring to. I doubt that your answer was for me and the text you have quoted. Same in your answer/post before.
But you quoted me instead of
to what was your answer.
It auto populated and I didnāt realize it quoted you. Itās not that big of a deal, Iāll edit it.
So what Iām trying to achieve is twofold:
- the bus timetable cards should always remain the same height as the weather card next to them
- if the number of departures increase beyond the height of the card they wrap into a second column inside the same card.
Right now the bus cards are dynamically resizing depending on the times shown, so they get both too small and too large, this is what it looks like right now with many time entries expanding the cards too much:
I believe each section of the Weather Card will need to be altered if you are looking to shrink itās real estate. You may be able to scroll the bus cards with overflow-y: scroll
Can you post the code for one of the Bus cards?
With the latest Home Assistant update this no longer works. I wonder if the new drag and drop capabilities broke this.
this works just nicely:
- type: conditional
conditions:
- condition: state
entity: input_boolean.sticky_menu
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
position: fixed;
background: var(--primary-color);
width: 494px;
/*top: 68px;*/
bottom: 10px;
z-index: 1;
}
card: !include /config/dashboard/buttons/buttons_dashboards.yaml
- type: conditional
conditions:
- condition: state
entity: input_boolean.sticky_menu
state_not: 'on'
card: !include /config/dashboard/buttons/buttons_dashboards.yaml
on ha 2024.4.2
(too lazy to find another way for the boolean toggle to work using card_mod and core cards only, the double conditional works fineā¦)
do note that you might need to add some extra spacing in the view, to compensate for the menu (in this case) being sticky, and thus covering anything else you might have there
Below is the code for one of the bus cards.
I think you might be misunderstanding a bit, I donāt want to do anything to the weather card at all.
For the bus cards I just want the cards to have a static size, and for the times to wrap into a second column if necessary. I donāt want scroll bars as this dashboard will be on an e-ink display.
- type: grid
square: false
columns: 2
cards:
- type: custom:auto-entities
show_empty: false
unique: true
card:
type: entities
title: line 2
icon: mdi:bus
card_mod:
style:
hui-grid-card:
$: |
#root {
height: 100px;
}
hui-sensor-entity-row:
$: |
.text-content {
width: 60px;
}
.: |
ha-icon.icon {
padding-right: 0px;
}
h1.card-header {
padding-bottom: 15px;
}
#states > * {
height: 20px;
width: 50px;
}
div#states.card-content {
width: 85%;
height: 185px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 0 0 100%;
}
ha-card.type-entities div#states.card-content div {
margin: 3px 0px;
}
filter:
include:
- entity_id: /^sensor.llt_line_2_.*$/
attributes:
time: /.*/
options:
card_mod:
style:
hui-generic-entity-row:
$: |
div.info.pointer.text-content {
display: none !important;
}
state-badge {
display: none !important;
}
I direct messaged you for testing and a few questions.
How do I target ha-card in the weather-forecast card?
I tried several things, including the below, but Iām not able to get at it.
- type: weather-forecast
show_current: false
show_forecast: true
entity: weather.forecast_home
forecast_type: daily
card_mod:
style:
hui-weather-forecast-card:
$: |
ha-card {
padding-top: 0px;
padding-bottom: 0px;
}
Just straight to ha-card
card_mod:
style: |
ha-card {
--bar-height: 1rem !important;
color: red;
font-size: 15px;
padding: 0px 0px 0px 10px;
}
Tried this, but it does nothing to the padding (the color entry actually at least changes the font color in the cardā¦). Changing the padding in browser inspector works, but via the card mod doesnāt change it. Anything else to consider? I want to change the padding from the default 16px to 0.
I am trying to downgrade card-mod to version 3.4.0 (testing frontend performance issues on some tablets); older versions do appear in HACS/redownload but the system wonāt let me select anything else than the current version ( 3.4.3 ). Can you reproduce or help troubleshoot? thx
What card are you trying to adjust? Card-mod isnāt standardized for every card. Certain cards require diffent code.
go to the repo and check the releases page
there you can download all previous releases, and install them manually
Also the weather-forecast card that was mentioned before. The strange thing is that a color-command actually has an impact, while padding doesnāt.