Make floorplan take up 100% width, and allow body overflow?

Third party integrations Floorplan
1

so it’s been a bit since I used css, but what i’m doing with floorplan requires my svg to take up 100% width of the screen. The floorplan is 1080px by 4500px. I also need it to allow overflow so you can scroll down the page.

Currently the svg is auto resizing, but I want to be able to scroll down the page, not have it auto resize the svg.
i’m making an interface with it not an actual floorplan.

changing height: calc(100%) in .container-fullscreen to a different % like 400% makes the svg wider but I wont know the exact height in % on different devices. I tried changing the height there to auto but that doesn’t work.

2

It should work if you change the height of the svg element itself, instead of the container.

It’s kind of hacky, but the only way I found to do it was to modify ha-floorplan.html in www/custom_ui/floorplan

Look for the line (line 216 in my case)

$(svg).height('100%');

and change it to

$(svg).height('auto');

You’ll need to do a hard reload of the page afterward.

Hopefully that does the trick for you.

1 Like
3

I’ll try it when I get home thanks!