Skip to content

Editor not working on grid or Horizontal stack #2

@L0bit0

Description

@L0bit0

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&ordm;</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"

image

  • 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&ordm;</span></span></td>\n\t\t</tr>\n\t</tbody>\n</table>"
type: custom:tailwindcss-template-card

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions