Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor not working on grid or Horizontal stack #2

Open
L0bit0 opened this issue Dec 18, 2023 · 0 comments
Open

Editor not working on grid or Horizontal stack #2

L0bit0 opened this issue Dec 18, 2023 · 0 comments

Comments

@L0bit0
Copy link

L0bit0 commented Dec 18, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant