-
Notifications
You must be signed in to change notification settings - Fork 3
Open
Description
Hi
I am starting to use this card for a simple HTML card, and having really wired behavior.
Let me first explain why I am using this card and not Markdown
- I need to show two basic sensors for temperature.
- Default entity card show this info too small, as I want to show on a wall panel and able to read for some meters of distance.
- I tried some html on markdown, but it ignores size:
- Markdown card Code
type: markdown
content: "<table align=\"center\" border=\"0\" cellpadding=\"20\" cellspacing=\"1\" style=\"width:500px\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<td><strong><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"color:#02c39a\">Temp. INT</span></span></strong></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"font-size:90px\">{{ states('sensor.netatmo_INT_temperature') }} </span><span style=\"font-size:26px\">Cº</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"
- I check and looks tailwindcss can propertlly show HTML font size and color:
- Tailwindcss code:
entity: ''
content: "<table align=\"center\" border=\"0\" cellpadding=\"20\" cellspacing=\"1\" style=\"width:500px\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<td><strong><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"color:#02c39a\">Temp. INT</span></span></strong></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"font-size:90px\">{{ states('sensor.netatmo_INT_temperature') }} </span><span style=\"font-size:26px\">Cº</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"
type: custom:tailwindcss-template-card
The problem come on edition of Tailwindcss, as card is being “reset” during the edition with no reason, let me go step by step on what I am doing:
- I create a Tailwindcss card with a sensor info (previous code)
- I create a grid or horizontal card to add a copy of these previous card
- I add the card two times
- I tried to edit the second card to change some basic info (sensor name and description)
- Tailwindcss card remove my html code and default code appear, but preview still show initial config:
I click on save, but code is updated for both Tailwindcss card, but showing initial card HTML info

Code:
type: horizontal-stack
cards:
- entity: ''
content: "<table align=\"center\" border=\"0\" cellpadding=\"20\" cellspacing=\"1\" style=\"width:500px\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<td><strong><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"color:#02c39a\">Temp. INT</span></span></strong></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"font-size:90px\">{{ states('sensor.netatmo_INT_temperature') }} </span><span style=\"font-size:26px\">Cº</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"
type: custom:tailwindcss-template-card
- entity: ''
content: "<table align=\"center\" border=\"0\" cellpadding=\"20\" cellspacing=\"1\" style=\"width:500px\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<td><strong><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"color:#02c39a\">Temp. INT</span></span></strong></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td><span style=\"font-family:Trebuchet MS,Helvetica,sans-serif\"><span style=\"font-size:90px\">{{ states('sensor.netatmo_INT_temperature') }} </span><span style=\"font-size:26px\">Cº</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"
type: custom:tailwindcss-template-
card
I tried restarting the browser editing on different ways, trying to past new HTML code from a file...
At this moment I was able to create the card separately but never include on horizontal stack or grid cards.
In fact the issue also happens trying to edit another tailwind card on the same dashboard...
any idea? thank in advance
Metadata
Metadata
Assignees
Labels
No labels


