new frontend (0214) finally fixes the long awaited troubles with the input_selects being clipped at the browser borders.
However… now we have a theming problem:
checking inspector shows we now need to set
mdc-select-ink-color: var(--primary-text-color)
mdc-select-fill-color: var(--card-background-color)
and that makes:
and selected (active)
only want the primary color back on the unselected name, for now this is a heads up 
Is it a screenshot from iPhone? )))
I guess (cannot test) that by adding the margin-right: -16px you move the scrollbar outside the card and it will be displayed only while scrolling.
On desktop you will not see a scrollbar, the area will be scrollable by mouse.
yes, I need to set those margins, because the 16px default would otherwise show the edges of the entities card. however, I do that everywhere, and only here it moves the scrollbar outside of the card…
setting the padding to 0px brings it back in.
and no this is a screenshot from desktop browser, and I tested in Safari, Chrome, Firefox.
iPhone is beautiful too though
fyi, this is what happens when using
- type: entities
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
}
.card-content {
max-height: 400px;
overflow-y: scroll;
margin: -8px 0px -8px 0px;
/*padding-right: 0px;*/
padding-top: 8px;
}
steady
scrolling:
so, first set margins to make buttons use full width, then set padding-right to push scrollbar back in.
hello. please help me remove this block. there used to be an icon there. I deleted the icon itself, but the block under it is still there. how do I delete this block?
You should apply a “display: none” property to “state-badge” element.
thanks for the reply. I’ve done this before, but I made a mistake with tabs and spaces
full version
- type: entities
entities:
- entity: sensor.west
style:
"#states div":
hui-sensor-entity-row:
$:
hui-generic-entity-row:
$: |
.flex .info {
margin-top: -20px;
}
state-badge {
display:none;
}
.
Too many errors with indents and using “: |”.
Check other card-mod examples (1st post).
Dear Илдар,
I’ve read the whole thread, but I’m stuck, even with using card-mod-helper.
How do I have to express the following:
I’ve tried (amongst countless other versions):
- type: custom:layout-card
layout_type: custom:vertical-layout
card_mod:
style: |
vertical-layout$:
#columns {
border-radius: 12px;
margin: 0;
}
cards:
- type: custom:button-card
styles:
card:
- border-radius: 12px !important #doesn't work
- ha-card-border-radius: 12px !important #doesn't work
- box-shadow: 3px 3px rgba(0,0,0,0.3) #works
- border-style: solid #works
… but to no avail.
Ofc… Ive found something you didnt touch yet: how to move the head group icon to the left.
Just like we did with the label before:
card_mod: &label
style: |
.label {
margin-left: 0px;
}
Id love to move the icon of the head: group to the left with the same amount:
I tried it with:
card_mod:
style: |
hui-generic-entity-row:
$: |
state-badge.pointer {
margin-left: 0px;
}
but no effect.
config:
entities:
- type: custom:fold-entity-row
head: group.philips_room_motion_sensor_switches
card_mod:
style: |
hui-generic-entity-row:
$: |
state-badge.pointer {
margin-left: 0px;
}
group_config:
secondary_info: last-changed
# type: section
# label: Rooms
# card_mod: *label
padding: 0
since using :host and icon color works fine, I tried expanding that to:
card_mod:
style: |
:host {
--paper-item-icon-color: red;
margin-left: 0px;
}
but again: no margin shift, just a color red
@Mariusthvdb You are going to have to show me one day how to navigate the shadowDOM for styling. I just cannot seem to get the syntax or selectors correct.
On another topic. @Mariusthvdb and @arganto thanks for pointing me in the right direction. I have made some good progress and will post soon. My question today is: Is there a way to set the tap_action conditionally? eg. If there is an active weather alert I would like the tap_action to display the full text of the alert in a popup. (I have this part working). If there is no active alert, I want the tap_action set to ‘none.’ Is this possible?
Ghalfa I am in the same boat. It just isn’t making sense yet. Nice Border Collie BTW
ofc … 
that is, it depends on the card you want to do that with. this is eg a custom:button-card:
hold_action:
action: >
[[[ return (window.location.pathname.split('/')[2] != 'home_summary')
? 'navigate' : null; ]]]
navigation_path: >
[[[ return (window.location.pathname.split('/')[2] != 'home_summary')
? '/ui-overview/home_summary' : null; ]]]
did you see this?
https://matt8707.github.io/card-mod-helper/
Yep, it is a custom:button-card. And this tells me it is possible, so let me work on this. Thanks again.
Yes, that hasn’t been much help. I think my problem also lies with knowing what I can and cannot style and where to start drilling down.
So this is what I am trying to do:
tap_action:
action: >
[[[ return (states['binary_sensor.rndrck_alrt']) ?
'!include popup/roundrck_alert.yaml' :
'none';
]]]
Apparently, this is not the way to do this.
There’s two parts to an action if you look at Marius’ code. First, the action itself (navigate, or in your case fire-dom-event) and then the data that goes with it (navigation_path, or in your case I’d try with browser_mod).
Yes, I think this works. Although I have manually set the state to off/false and I still get a popup.
tap_action:
action: >
[[[
return (states['binary_sensor.template_rndrck_alrt'].state) ?
'fire-dom-event' :
'none';
]]]
browser_mod:
command: popup
title: Round Rock Alert
large: true
card:
type: iframe
url: https:// ...
You’re missing the operator on your if statement, that might have something to do with it
I don’t see what I am missing. I did reformat it like Marius’ snippet, but I still get the same behavior. Sorry if I am obtuse on this:
tap_action:
action: >
[[[ return (states['binary_sensor.template_rndrck_alrt'].state)
? 'fire-dom-event' : 'none'; ]]]