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

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.

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

I’ll try it when I get home thanks!