usernein / tailwindcss-template-card

Custom card for Home Assistant that renders html code with TailwindCSS styles into the dashboard
MIT License
49 stars 1 forks source link

Editor not working on grid or Horizontal stack #2

Open L0bit0 opened 10 months ago

L0bit0 commented 10 months ago

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

image

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:

  1. I create a Tailwindcss card with a sensor info (previous code)
  2. I create a grid or horizontal card to add a copy of these previous card
  3. I add the card two times
  4. I tried to edit the second card to change some basic info (sensor name and description)
  5. Tailwindcss card remove my html code and default code appear, but preview still show initial config:

image

I click on save, but code is updated for both Tailwindcss card, but showing initial card HTML info image

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&ordm;</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&ordm;</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