1st post â link at the bottom
So you gave me the link to Githubs Card Mod⌠Thanks 
Belive me, I have been there. And in this threadâŚ
Check again what I wrote you. It was not about a Github.
Thanks! Found a bunch of replies from Ildar in this thread with examples. Fixed some other problems iâve been working with as well.
Pretty certain this was the issue and have fixed now! Thanks!
Markdown with images:
type: markdown
content: |-
xxx
yyy
card_mod:
style:
ha-markdown $: |
img:nth-of-type(2) {
height: 100px;
filter: opacity(0.5);
}
Markdown with a table:
type: markdown
content: |
<div class="tg-wrap">
<table width=100%>
<tbody>
{%- for i in range(5) -%}
{{
'<tr>
<td>
<ha-icon icon="mdi:bell"></ha-icon>' +
'<span>' +
states("sun.sun") +
'</span>' +
'</td>
<td>' +
states("sun.sun") +
'</td>
</tr>'
}}
{%- endfor -%}
</tbody>
</table>
</div>
card_mod:
style:
ha-markdown $: |
tr td:nth-child(2) {
color: red;
text-align: right;
}
tr:nth-child(2n) {
background-color: rgba(33,33,33,0.2);
}
tr:nth-child(2) td:nth-child(1) {
color: magenta;
}
tr:nth-child(3) td:nth-child(1) ha-icon {
color: orange;
}
tr:nth-child(4) td:nth-child(1) span {
color: magenta;
}
1 Like
I am hoping someone can give me some guidance. I am using the markdown card. I would like to change the default td vertical alignment so that in the screenshot, the mdi bell icon and the timestamp text are both vertically aligned to the top instead of the middle/center.
Iâm not sure; but from what I can see in my web browserâs Developer Tools, it shows that td{} veritical alignment is being forced by the user agent stylesheet to inherit. I could be wrong.
In any case, I would like to know what is preventing me from changing this; and, the easiest way to change this.
Interesting, Ildar.
I wonder if my original method will now work again, because I did something similar to what you did here when that broke for me. In the end I had to go for another hack.
Iâm more reporting my various solutions and attempts here to document it than asking for help. Sharing out of interest.
This was the original approach and the cleanest in my opinion.
(I only see now I posted it under the theme post for some reason. Oops.)
But then that broke, either due to something with card-modâs compatibility with HA or a UI change in HA.
I then tried the HTML in markdown as you did here, but couldnât get it working completely, so in the end I used the custom button card as an HTML container with some JS to build the table, with the styling applied by card-mod.
Can we extend the entity name space to the right to use the free/white area?
With longer names the text is usually cut off (and putting it in another line below is not nice either). Reducing the number field size/padding on the right unfortunately does not extend the entity name to make it expand and make use of the additional free space.
See red box area.
First, thank you for your âcontentâ code.
I never used markdown for tables till yesterday/day before, so had ho idea how to draw tables in markdown.
Regarding card-mod.
Sometimes - very rarely - I see some instability for markdown.
What I noticed is (and told about it earlier) - using this
style:
ha-markdown:
$: |
is better than
style:
ha-markdown $: |
While playing with card-mod for tables in markdown, I created 3 similar cards (code will be posted later), all 3 cards seem to be have stable styles. So, cannot find a reason of instabilityâŚ
As I said many times, I am not an expert in CSS, only deal with it for card-mod.
Mainly my CSS knowledge comes from âtry-fail-try-successâ.
Regarding your code.
table {
border-spacing: 0;
width: 100%;
padding: 8px;
border-radius: var(--ha-card-border-radius);
}
This âborder-radiusâ seems to be not working:
â there is a âpaddingâ defined;
â âoverflowâ is default (w/o clipping),
so it does not change borders.
Later I will post a method to define borders.
Next, for this:
th:first-child {
border-top-left-radius: var(--ha-card-border-radius);
}
th:last-child {
border-top-right-radius: var(--ha-card-border-radius);
}
This way to define âborder-radiusâ is preferable if:
â you need to define âborder-radiusâ for the âtheadâ only;
â due to some reasons you cannot define âborder-radiusâ for âtableâ (in this case you will have to define âborder-radiusâ for the last row as well).
Next, for this:
tr:nth-child(even) {
background-color: var(--table-row-background-color);
}
The âtrâ element is inside âtheadâ too.
So, use âtbody tr:nth-child(even)â path.
BTW, your code for table may be a bit âoptimizedâ:
content: >-
Domain | Count
:---|---:
{% for domain in (states | groupby('domain'))[:5] -%}
{%- set name = domain[0].replace('_', ' ') | title -%}
**{{ name }}** | {{ states[domain[0]] | count }} {{"\n"}}
{%- endfor %}
1 Like
Some more examples for styling tables in Markdown
(the initial idea of @parautenbach)
Here only background defined for a âtheadâ & âtbodyâ:
type: markdown
content: >
Domain | Count
:---|---:
{% for domain in (states | groupby('domain'))[:5] %} {% set name =
domain[0].replace('_', ' ') | title %} **{{ name }}** | {{ states[domain[0]] |
count }} {# leave blank line below otherwise table won't render #}
{% endfor %}
card_mod:
style:
ha-markdown $: |
table {
width: 100%;
}
th {
background-color: orange;
}
tbody tr {
background-color: cyan;
}
More styles:
â globally defined âborder-radiusâ;
â removed spacing between cells;
â paddings for text;
â colored header text;
â odd & even rows have diff. background.
card_mod:
style:
ha-markdown $: |
table {
width: 100%;
border-radius: 6px;
border-spacing: 0;
overflow: hidden;
}
th {
background-color: orange;
color: white;
padding: 4px;
}
td {
padding: 4px;
}
tbody tr:nth-child(even) {
background-color: grey;
}
tbody tr:nth-child(odd) {
background-color: cyan;
}
Here how to define âborder-radiusâ in a case when the âgloballyâ defined âborder-radiusâ does not work:
â we need to keep spacings between cells;
â have to define âborder-radiusâ for âtheadâ & last row.
card_mod:
style:
ha-markdown $: |
table {
width: 100%;
}
th {
background-color: orange;
color: white;
padding: 4px;
}
td {
padding: 4px;
}
tbody tr:nth-child(even) {
background-color: grey;
}
tbody tr:nth-child(odd) {
background-color: cyan;
}
th:first-child {
border-top-left-radius: 6px;
}
th:last-child {
border-top-right-radius: 6px;
}
tbody tr:last-child :first-child {
border-bottom-left-radius: 6px;
}
tbody tr:last-child :last-child {
border-bottom-right-radius: 6px;
}
Also more examples/ideas may be found here:
styling flex-table-card
4 Likes
Kind of this?
code
type: entities
entities:
- entity: input_number.number_float
name: some long long long long long
- entity: input_number.number_float
name: some long long long long long
card_mod:
style:
hui-generic-entity-row $: |
.info {
white-space: unset !important;
}
- entity: input_number.number_float
name: some long long long long long
card_mod:
style:
hui-generic-entity-row $: |
.info {
flex: 1 1 50% !important;
}
2 Likes
Ah, itâs defined in my custom.js. Itâs from the time when HA didnât have rounded corners on cards. They since introduced it, but with a larger radius, so Iâve kept mine.
Yes, thatâs what I want in my case: only the top left and right corners of the head row must be rounded.
Thanks. Indeed. The whitespace control of Jinja can catch one out. Your version is a bit more maintainable and explicit.
Exactly. But how to apply this on this point (next to the existing
:host {
--ha-textfield-input-width: 50px;
#--text-field-padding: 0px;
}
inside auto-entities)?
Full code
type: grid
columns: 1
square: false
title: đ§ Konfiguration
cards:
- type: custom:collapsable-cards
title: đââď¸ Bewegungsmelder
defaultOpen: false
buttonStyle: 'font-size: x-large'
cards:
- type: entities
title: null
state_color: true
show_header_toggle: false
entities:
- type: custom:text-divider-row
text: Dauer (Trigger-/Aktiv-Zeit) *
align: center
style: |
:host {
#--text-divider-color: red;
--text-divider-font-size: 16px;
#--text-divider-line-size: 3px;
#--text-divider-margin: 1em 0;
#margin-bottom: 20px;
}
- type: custom:auto-entities
card:
type: entities
title: null
state_color: true
show_header_toggle: false
card_mod:
style:
.: |
ha-card {
border-width: 0px;
margin-bottom: -5px;
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
entities: null
filter:
include:
- entity_id: number.motion_*_duration
options:
secondary_info: last-changed
card_mod:
style: |
:host {
--ha-textfield-input-width: 50px;
#--text-field-padding: 0px;
}
exclude: []
show_empty: true
unique: true
sort:
method: name
reverse: false
In short: how to combine :host with hui-generic-entity-row in this case?
Unrelated to the issue: this is a wrong commentary style.
Should be:
/* --text-divider-color: red; */
1 Like
1st post â bla bla bla, you know the rest, and your point is:
1 Like
Fantastic. Only took me 3 minutes this time - getting used to it and therefore hopefully faster - (very) slowly⌠
This is my final working snippet
- entity_id: number.motion_*_duration
options:
secondary_info: last-changed
card_mod:
style:
.: |
:host {
--ha-textfield-input-width: 50px;
/* --text-field-padding: 0px; */
}
hui-generic-entity-row $: |
.info {
flex: 1 1 50% !important;
}
Since you provided no minimal code, I tested with this:
- type: markdown
content: |
<div class="tg-wrap">
<table width=100%>
<tbody>
<tr>
<td><ha-icon icon="mdi:bell"></ha-icon></td>
<td>long long long long long long long long long long long long long long long long long long long long</td>
<td>xxxxxxx</td>
</tr>
</tbody>
</table>
</div>
The âha-iconâ & text elements need to be in different âtdâ, otherwise with this
<td><ha-icon icon="mdi:bell"></ha-icon>long long long long long long long long long long long long long long long long long long long long</td>
you will see this:
With these examples I found a bit tricky to get stable results.
This was unstable:
card_mod:
style:
ha-markdown:
$: |
table tbody tr td {
vertical-align: top;
}
and this (contrary to my expectations) was stable:
card_mod:
style:
ha-markdown $: |
table tbody tr td {
vertical-align: top;
}
This one may be used as well:
card_mod:
style:
ha-markdown $: |
:first-child {
vertical-align: top !important;
}
2 Likes
