that Is a cool mod, and yes, I get it to work on actual lines of text. However, using that on a template returning a long list if text doesnt work.
I did play around bit in the markdown, as adding a white line here or there makes a lot of difference. I could not get it to get better than this though:
- type: markdown
card_mod:
style:
ha-markdown $: |
p:nth-child(2) {
max-height: 200px;
overflow-y: auto;
}
content: |-
<p>
{% set comp = state_attr('sensor.overview_components','components') %}
{% set sub = state_attr('sensor.overview_components','subdomains') %}
Components: {{comp}} | Subdomains: {{sub}}
</p>
<p>
{{state_attr('sensor.overview_components','per domain')}}
</p>
compare that to the post above with the unformatted template card, or this somewhat more elaborate card using some folding and separate markdowns:
type: entities
title: Components and domains
card_mod:
class: class-header-margin
entities:
- type: custom:hui-element
card_type: markdown
card_mod: &no-box
style: |
ha-card.type-markdown {
box-shadow: none;
margin: 0px -16px;
}
content: >
{% set comp = state_attr('sensor.overview_components','components') %}
{% set sub = state_attr('sensor.overview_components','subdomains') %}
Components: {{comp}} | Subdomains: {{sub}}
- type: custom:fold-entity-row
head:
type: section
label: Per domain
card_mod: &label
style: |
.label {
margin-left: 0px;
}
padding: 0
entities:
- type: custom:hui-element
card_type: markdown
card_mod: &scroll
style: |
ha-card.type-markdown {
box-shadow: none;
overflow-y: scroll;
height: 450px;
margin: 0px -16px;
}
content: >
{{state_attr('sensor.overview_components','per domain')}}
- type: custom:fold-entity-row
head:
type: section
label: Per Subdomain
card_mod: *label
padding: 0
entities:
- type: custom:hui-element
card_type: markdown
card_mod: *scroll
content: >
{{state_attr('sensor.overview_components','per subdomain')}}
