Without testing: This element is not in a shadow root inside ha-card of your card. So you should directly use:
card_mod:
style: |
clock-weather-card-today-right-wrap-top {
display: none !important;
}
You should address it in the theme-thread.
Youāre right, your example worked. But how is it that you can ignore the shadow root thatās under the clock-weather-card element? Iām new to using the card mod and this part is rather confusing.
He answered that questionā¦
Is the below link the theme-thread you suggested? Iām not sure. If not, could you please point me to the right thread? Thanks.
1 Like
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;
}