search

PiotrMachowski / Home-Assistant-Lovelace-HTML-Jinja2-Template-card

This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.
MIT License
68 stars 10 forks source link

cards overlap on each other #14

Closed roc634 closed 2 years ago

roc634 commented 2 years ago

Hello, Thanks for creating such a great project. I want to quote part of a weather forecast page and show it as a card in Home Assistant. Your project is able to show specific part of a page which meets my needs. However, when I try to add another card, they overlap on each other and I can't find a solution to that. Could you please help me with that? Thanks.

configuration for card 1:

type: custom:html-template-card picture_elements_mode: true ignore_line_breaks: true content: >

<iframe src="http://products.weather.com.cn/product/radar1/index/procode/JC_RADAR_AZ9200_JB.shtml" frameborder="0" allowfullscreen="false" allowtransparency="false" style="width: 100%; min-height: 1000px; border: 0; margin-top: 0px; margin-bottom: 0px; position: absolute; top: -350px; left: -0px; transform:scale(0.7);">

configuration for card 2:

type: custom:html-template-card picture_elements_mode: true ignore_line_breaks: true content: >

<iframe src="http://www.weather.com.cn/weather/101280608.shtml" frameborder="0" allowfullscreen="false" allowtransparency="false" style="width: 100%; min-height: 1000px; border: 0; margin-top: 0px; margin-bottom: 0px; position: absolute; top: -360px; left: -145px; transform:scale(0.7);">

cards shown in editing mode:

2022-2-17 15-16-1

cards shown in page:

2022-2-17 15-16-19
PiotrMachowski commented 2 years ago

Why do you use this card instead of built-in webpage card?

PiotrMachowski commented 2 years ago

The problem was with styles you have used, here is a fixed version:

type: custom:html-template-card
picture_elements_mode: true
ignore_line_breaks: true
content: >
  <div style="height: 600px; width: 100%; overflow: hidden; --scale: 0.7;">
  <iframe
  src="http://products.weather.com.cn/product/radar1/index/procode/JC_RADAR_AZ9200_JB.shtml"
  frameborder="0" allowfullscreen="false" allowtransparency="false"
  style="width: calc(100%/var(--scale)); height: calc(100%/var(--scale));
  transform:scale(var(--scale)); transform-origin: top left;"></iframe> </div>
roc634 commented 2 years ago

Thank you very much for your prompt rely. I've tried the built-in webpage card, but its function is so simple that I have to give up. Your card can show specific area of a page and that's what I needs. Thanks again. Have a nice day!

roc634 commented 2 years ago

I‘ve also tried to turn on and off picture_elements_mode. I noticed that picture_elements_mode could make full use of the space of the card, so I prefered to use it. Thanks for your advice.