Looking at the inspector on a Picture Elements Card,
I have an image, which has an entity
Lovelace is then putting a Clickable Element element onto the page
How do you control the size of this clickable element? It doesn’t correlate to any of the CSS on the dashboard, it only appears if you have add an entity to an image.
Unclear, what do you mean by “putting a Clickable Element element onto the page” ?
Check the second screenshot
Hui-image-element.clickable.element
It’s added to each image you have an associated entity.
It’s size doesn’t correlate the style attributes for the image, it’s just randomly large.
In the code inspector in home assistant the size correlates with the size of the image.
This extra clickable.element seems to have a totally different size not controlled by the style attributes. It seems to correlate with width, but the height is way off.
Any pointer events apply to just the images you can control the style of.
My question was about that “clickable element”.
Do you mean that it’s size is same as a size of the image?
Because your next statement seems to be opposite:
I think I can see what’s happening.
My question is more about the low level construction of the page.
It looks like it’s creating a div the size of the style attributes, but the image has it’s scalling preserved.
So if I style an image to be 20% width and 100% height, the image isn’t stretched to 100% height but the container it sits in (div clickable.element) is 100% height.
It makes sense, just a bit confusing
