@image969 Assuming youāre talking about displaying a card via browser_mod.popupā¦ thereās no special card-mod configuration. The easiest way Iāve found is to create the card you want to āpop upā in a test dashboard via normal means. Get your card-mod setup and whatever else exactly how you want it, and then copy the yaml into your browser_mod.popup service call under your firedom event. If you copy/paste correctly, the popup will look exactly like the card in your test dashboard.
Hi, thanks for the reply. I have the card working fine in the pop-up. Itās just a drop-down menu when you click on it. The pop-up dimensions arenāt big enough so it crops it. I want to know if the overflow in card mod can be used so it extends past the pop-up.
Canāt help much if you donāt post your current code, but you can definitely increase the height of the popup card which could solve your issue.
Hereās a screenshot of the code I was referring to. I would rather not change the height of the pop-up card, because then there would be a ton of blank space showing when Iām not using the drop-down menu. I have no problem with this overflow line anywhere else it just doesnāt seem to work Inside the pop-up card
I donāt think you can do that. The popup card has a defined size. You can change the size via card-mod etc, but itās a defined size nonetheless. You canāt declare anything outside the size of the popup card as there just isnāt any space there. Itās possible to add scrollbars, but thatās going to let you scroll the whole card. I suppose itās possible to add scrollbars to only the dropdown, but you would have to experiment with card-mod and it will depend on the specific card your trying to use and how itās constructed. I could very easily be wrong, but Iād be surprised if you can accomplish this with card-mod alone, at least as long as youāre talking about it being a popup card. In any case, if you donāt post your code properly formatted, then no one can help, as no one can copy and paste your code from a screenshot to try things and give you direction.
I was kind of thinking the same about not being able to escape outside of the pop up size. Here the code, if anyone is feeling bored lol
Please note, not everything will work correct, as this is one of 6 cards inside of a conditional setupā¦ My only concern is when you click on the card, and see the pop up and drop down for the Pandora section
Thanks
type: custom:mini-media-player
entity: media_player.living_room_2
background: /local/echo2.jpg
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:stack-in-card
cards:
- type: entities
entities:
- entity: input_select.content
name: platform
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- type: conditional
conditions:
- condition: state
entity: input_select.content
state: Pandora
card:
type: entities
entities:
- entity: input_select.pandora_stations
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- type: call-service
name: 'Pandora Radio '
icon: mdi:pandora
action_name: Play Music...
service: script.alexa_pandora_living
data:
- Pandora
state_color: false
show_header_toggle: true
- type: conditional
conditions:
- condition: state
entity: input_select.content
state: Amazon
card:
type: entities
entities:
- entity: input_text.text
type: custom:text-input-row
- type: call-service
name: 'Amazon Music '
icon: mdi:music
action_name: Play Music...
service: script.alexa_amazon_living
data:
- AMAZON_MUSIC
state_color: false
show_header_toggle: true
- type: conditional
conditions:
- condition: state
entity: input_select.content
state: Apple
card:
type: entities
entities:
- entity: input_text.text
type: custom:text-input-row
- type: call-service
name: Apple Music
icon: mdi:apple
action_name: Play Music...
service: script.alexa_apple_living
data:
- Apple
state_color: false
show_header_toggle: true
- type: custom:mini-media-player
entity: media_player.living_room_2
group: false
source: true
info: true
hide:
icon: true
volume: false
power: true
play: true
source: true
progress: true
name: true
stop: true
volume_stateless: false
toggle_power: true
replace_mute: stop
card_mod:
style: |
:host {
--mini-media-player-accent-color: #bfb6bd;
}
ha-card {
overflow
}
card_mod:
style: |
ha-card {
overflow: visible !important;
}
ha-card > div {
overflow-x: clip;
}
group: true
source: null
info: null
hide:
icon: true
volume: true
power: true
controls: true
source: true
progress: true
shortcuts:
columns: 6
buttons:
- icon: mdi:sofa
type: script
id: script.alexa_livingroom
- icon: mdi:pot-steam
type: script
id: script.alexa_kitchen
- icon: mdi:toilet
type: script
id: script.alexa_bathroom
- icon: mdi:movie-check
type: script
id: script.alexa_movieroom
- icon: mdi:desk
type: script
id: script.alexa_office
- icon: mdi:bed-king
type: script
id: script.alexa_bedroom
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(0) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(1) {
background-color: rgb(50,50,50,.6);
}
style: |
ha-card {
height: 250px;
}
tts:
platform: alexa
(for ppl finding replied post via search, like I did):
For limiting āhistory-graphā height, at least in HA 2024-3 the card supports variable āchart-max-heightā, it can be set on the root ha-card
ha-card {
--chart-max-height: 80px !important;
}
1 Like
Hi, you have helped me with code more than anyone on a year ago in the mushroom forum so I hope you can help me again, cause Iāve been struggling for a week lol
For a browser-mod pop-up card. I have a drop down menu inside. When I click on the drop down it gets cropped due to the height of the card. I have to scroll the entire card down. Is it possible using card_mod to do the overflow: visible to have the drop down extend past the pop-up? i cannot for the life of me get this to work
As a worse case scenerio, is it possible to have the height of the card adjust dynamically. Kind of like a todo list when you add to the list, the card will in create in height
Does anyone know how to hide the āAttributesā from the more-info-card? Iāve tried lots of things but canāt figure it out unfortunately!
type: custom:stack-in-card
keep:
outer_padding: true
border-radius: true
box_shadow: false
background: false
margin: false
cards:
- type: custom:more-info-card
entity: light.living_room
title: ' '
card_mod:
style: |
state-card-content { display: none }
more-info-light:
$: |
ha-attributes {
display: { display: none }
ha-select { display: none }
hr { display: none }
}
- type: custom:rgb-light-card
entity: light.living_room
justify: around
size: 35
label_size: 12
colors:
- type: call-service
service: scene.turn_on
service_data:
entity_id: scene.living_room_1_white
icon_color: '#ffffff'
label: White
- type: call-service
service: scene.turn_on
service_data:
entity_id: scene.living_room_2_white_dimmed
icon_color: '#f1ebdf'
label: Dimmed
- type: call-service
service: scene.turn_on
service_data:
entity_id: scene.living_room_3_pink
icon_color: '#f290f4'
label: Pink
- type: call-service
service: scene.turn_on
service_data:
entity_id: scene.living_room_4_orange
icon_color: '#fcb92e'
label: Orange
- type: custom:rgb-light-card
entity: light.living_room
justify: around
size: 35
label_size: 12
colors:
- type: call-service
service: scene.turn_on
service_data:
entity_id: scene.living_room_5_ireland
icon_color: '#20f32f'
label: Ireland
- type: call-service
service: script.living_room_dynamic_pinkky
data: null
icon_color: '#FFB6C1'
label: Dyn-Pink
- type: call-service
service: script.living_room_dynamic_retro_80s
data: null
icon_color: '#FAA0A0'
label: Dyn-Retro
- type: call-service
service: script.living_room_dynamic_xbox
data: null
icon_color: '#107C10'
label: Dyn-Xbox
Fantastic, thank you! 
Is there any way to hide the āEffectā button also?
donāt think we added that yet, but open a FR and we can have a look 
1 Like
I have a problem with my current setup. Sometimes the colour is shown and sometimes not. Itās very sporadic and can be fixed by reloading the page in the browser. But on the Android app itās not that easy to reload the pageā¦
Perhaps itās related to my code and something is wrong with it.
type: entities
title: Temperatur
entities:
- entity: sensor.temperatur_aussen_2
type: custom:multiple-entity-row
icon: mdi:temperature-celsius
name: AuĆen
format: precision1
state_header: Aktuell
styles:
font-weight: bold
entities:
- entity: sensor.temperatur_tagesminimum
name: Minimum
format: precision1
- entity: sensor.temperatur_tagesmaximum
name: Maximum
format: precision1
- entity: sensor.temperatur_eg_wohnen_taster
type: custom:multiple-entity-row
name: Wohnen
format: precision1
state_header: Temperatur
entities:
- entity: sensor.voc_eg_wohnen
name: VOC
format: precision0
- entity: sensor.co2_eg_wohnen
name: CO2
format: precision0
- entity: sensor.luftfeuchtigkeit_eg_wohnen
name: Feuchte
format: precision1
card_mod:
style: |
.entities-row div.entity:nth-child(1) {
{% set state = states('sensor.voc_eg_wohnen') %}
{% if state | int < 400 %}
color: green;
{% elif (state | int >= 400) and (state | int < 1300) %}
color: orange ;
{% elif state | int >= 1300 %}
color: red ;
{% endif %}
}
.entities-row div.entity:nth-child(2) {
{% set state = states('sensor.co2_eg_wohnen') %}
{% if state | int < 1000 %}
color: green;
{% elif (state | int >= 1000) and (state | int < 1400) %}
color: orange;
{% elif state | int >= 1400 %}
color: red;
{% endif %}
}
.entities-row div.entity:nth-child(3) {
{% set state = states('sensor.luftfeuchtigkeit_eg_wohnen') %}
{% if state | int < 40 %}
color: orange;
{% elif (state | int >= 40) and (state | int <= 60) %}
color: green;
{% elif state | int > 60 %}
color: orange;
{% endif %}
}
.entities-row div.entity:nth-child(4) {
font-weight: bold;
}
- entity: sensor.stromzaehler_aktuellerverbrauch_volkszaehler
name: Stromverbrauch Haus
Iām trying to customize the clock-weather card, but how do I target the clock-weather-card-toray-right-wrap-top field?
I tried doing it this way, but that doesnāt work:
card_mod:
style:
clock-weather-card $ ha-card $ div:
.: |
clock-weather-card-today-right-wrap-top {
display: none;
}
View of the DOM:
Iām trying to add simple drop-shadow effect globally to all my Home Assistant cards via my custom theme file. For some reason, when I append ha-card { box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important; } to my card-mode code below, it has no visible effect. However, the other card-mod modifications work just fine.
card-mod-root: |
.edit-mode, app-header, app-toolbar {
background: var(--app-header-background-color) !important;
color: var(--primary-text-color) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
ha-card {
box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important;
}
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.