Hi team,
I’m a “tinkerer” of CSS (rookie), and I just cant seem to set the “overflow” to “visible” using card mod. (assuming that’s what I need to do to fix this? or perhaps something to do with setting the element size???)
I have a problem with some customization I’ve done to create a custom weather card(s) using a Mushroom Template card.
Here is the problem: The text gets chopped off.
when I look in dev-mode, and change the “overflow” from “hidden” to “visible” it fixes the problem:
if anyone can please assist in how to set the “overflow: visible” it would be greatly appreciated
if you’re interested here is my code:
type: vertical-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Today - {{ now().strftime('%A') }}
secondary: ''
icon: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 30px;
max-height: 40px;
font-family: raleway light;
border: none;
}
- type: custom:mushroom-template-card
primary: |
{{ states('sensor.varsity_lakes_temp_max_0') |int}} °C
secondary: ''
icon: ''
fill_container: false
entity: sensor.template_bom_now_temp
badge_icon: ''
multiline_secondary: false
picture: |
{{state_attr('sensor.weather_bom_animated_day_0', 'entity_picture')}}
badge_color: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 50px;
max-height: 100px;
text-align: right;
font-family: raleway;
margin: 1em 1em -1em -2em;
border: none;
}
:host {
--mush-icon-size: 240px;
}
- type: custom:mushroom-template-card
primary: |-
{% set max=states('sensor.varsity_lakes_temp_max_0') %}
{% if max=='unknown' %}
{% set max='--' %}
{% endif %}
{% set min=states('sensor.varsity_lakes_temp_min_0')%}
{% if min=='unknown' %}
{% set min='--' %}
{% endif %}
Min {{min}}°C
secondary: ''
icon: ''
fill_container: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 25px;
max-height: 30px;
text-align: right;
font-family: raleway light;
border: none;
}
- type: custom:mushroom-template-card
primary: |-
{% set chance=states('sensor.varsity_lakes_rain_chance_0') %}
{% if chance=='unknown' %}
{% set chance='--' %}
{% endif %}
{% set rainfall=states('sensor.varsity_lakes_rain_amount_max_0')%}
{% if rainfall=='unknown' %}
{% set rainfall='--' %}
{% endif %}
Chance of rain {{chance}}% | Rain {{rainfall}}mm
secondary: ''
icon: ''
fill_container: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 25px;
max-height: 30px;
text-align: right;
font-family: raleway light;
border: none;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: >-
Tomorrow - {{ (as_timestamp(now())+(60*60*24))|timestamp_custom('%A')
}}
secondary: ''
icon: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 30px;
max-height: 40px;
font-family: raleway light;
border: none;
}
- type: custom:mushroom-template-card
primary: |
{{ states('sensor.template_bom_tomorrow_max_temp') |int}} °C
secondary: ''
icon: ''
fill_container: false
entity: sensor.template_bom_now_temp
badge_icon: ''
multiline_secondary: false
picture: |
{{state_attr('sensor.weather_bom_animated_day_1', 'entity_picture')}}
badge_color: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 50px;
max-height: 100px;
text-align: right;
font-family: raleway;
margin: 1em 1em -1em -2em;
border: none;
}
:host {
--mush-icon-size: 240px;
}
- type: custom:mushroom-template-card
primary: |-
{% set max=states('sensor.varsity_lakes_temp_max_1') %}
{% if max=='unknown' %}
{% set max='--' %}
{% endif %}
{% set min=states('sensor.varsity_lakes_temp_min_1')%}
{% if min=='unknown' %}
{% set min='--' %}
{% endif %}
Min {{min}}°C
secondary: ''
icon: ''
fill_container: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 25px;
max-height: 30px;
text-align: right;
font-family: raleway light;
border: none;
}
- type: custom:mushroom-template-card
primary: |-
{% set chance=states('sensor.varsity_lakes_rain_chance_1') %}
{% if chance=='unknown' %}
{% set chance='--' %}
{% endif %}
{% set rainfall=states('sensor.varsity_lakes_rain_amount_max_1')%}
{% if rainfall=='unknown' %}
{% set rainfall='--' %}
{% endif %}
Chance of rain {{chance}}% | Rain {{rainfall}}mm
secondary: ''
icon: ''
fill_container: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 25px;
max-height: 30px;
text-align: right;
font-family: raleway light;
border: none;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: '{{ (as_timestamp(now())+(60*60*48))|timestamp_custom(''%A'') }}'
secondary: ''
icon: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 30px;
max-height: 40px;
font-family: raleway light;
border: none;
}
- type: custom:mushroom-template-card
primary: |
{{ states('sensor.template_bom_day_after_tomorrow_max_temp') |int}} °C
secondary: ''
icon: ''
fill_container: false
entity: sensor.template_bom_now_temp
badge_icon: ''
multiline_secondary: false
picture: |
{{state_attr('sensor.weather_bom_animated_day_2', 'entity_picture')}}
badge_color: ''
card_mod:
style: |
ha-card {
--card-primary-font-size: 50px;
max-height: 100px;
text-align: right;
font-family: raleway;
margin: 1em 1em -1em -2em;
border: none;
}
:host {
--mush-icon-size: 240px;
}
- type: custom:mushroom-template-card
primary: |-
{% set max=states('sensor.varsity_lakes_temp_max_2') %}
{% if max=='unknown' %}
{% set max='--' %}
{% endif %}
{% set min=states('sensor.varsity_lakes_temp_min_2')%}
{% if min=='unknown' %}
{% set min='--' %}
{% endif %}
Min {{min}}°C
secondary: ''
icon: ''
fill_container: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 25px;
max-height: 30px;
text-align: right;
font-family: raleway light;
border: none;
}
- type: custom:mushroom-template-card
primary: |-
{% set chance=states('sensor.varsity_lakes_rain_chance_2') %}
{% if chance=='unknown' %}
{% set chance='--' %}
{% endif %}
{% set rainfall=states('sensor.varsity_lakes_rain_amount_max_2')%}
{% if rainfall=='unknown' %}
{% set rainfall='--' %}
{% endif %}
Chance of rain {{chance}}% | Rain {{rainfall}}mm
secondary: ''
icon: ''
fill_container: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 25px;
max-height: 30px;
text-align: right;
font-family: raleway light;
border: none;
}
view_layout:
grid-area: row1c