floorplan forcing svg to 100% height, overwriting css

[bradmatix]

This might not be a bug, more so a feature request. I was trying to use card_mod to adjust the css of the SVG image within my ha-floorplan card. I wanted the card to not scroll beyond 80% of the vertical view height. The reason I wanted to do this, was the floorplan image I am using is taller than it is wide. When you maximise your browser, the image would scale, always trying to reach 100% of the width of the browser window. This would push the bottom of the image off the screen, forcing you to scroll. Setting the svg height to 80vh manually using developer tools prevents this from happening.

When ha-floorplan JavaScript loads, it overwrites card-mod CSS to set height to 80vh, reverting back to 100% height. In the end, I had to adjust the floorplan javascript to hardcode the height to 80vh, but if there are updates in the future, this is likely to be reverted.

Am i missing something? Or is there a possibility to adjust floorplan so that if CSS has been used to adjust the height of the svg away from 100%, that floorplan-ha doesnt overwrite that value?

if is this particular part of the code:

async loadFloorplanSvg(e,t,n){
let i;
try{
i=await Ai.fetchText(e.location,this.isDemo,this.examplespath,e.cache)
}catch(t){
throw this.logError("IMAGE",Error loading image: ${e.location}),t
}
const r=document.createElement("div");
r.innerHTML=i;
const s=r.querySelector("svg");
if(t&&s.setAttribute("id",t.config.page_id),
// Change height to 80vh instead of 100%
s.setAttribute("height","100%"),
s.setAttribute("width","100%"),
s.style.height="100%",
s.style.width="100%",
s.style.margin="auto",
s.style.cursor="default",
s.style.opacity="0",
s.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),
t&&n){
const e=n.config.page_id,i=n.config.master_page.content_element;
if(t.config.page_id===e)this.floorplanElement&&this.replaceChildrenUtil(this.floorplanElement,s);
else{
const e=this.floorplanElement.querySelector("#"+i),
t=Number.parseFloat(s.getAttribute("height")),
n=Number.parseFloat(s.getAttribute("width"));
s.getAttribute("viewBox")||s.setAttribute("viewBox",0 0 ${n} ${t}),
s.setAttribute("preserveAspectRatio","xMinYMin meet"),
s.setAttribute("height",e.getAttribute("height")),
s.setAttribute("width",e.getAttribute("width")),
s.setAttribute("x",e.getAttribute("x")),
s.setAttribute("y",e.getAttribute("y")),
e?.parentElement&&this.replaceChildrenUtil(e.parentElement,s)
}
}else this.floorplanElement&&this.replaceChildrenUtil(this.floorplanElement,s);
return s
}

[exetico]

Is this case for a card surrounded by other cards?

At screenshot no. two, there's a scrollbar, for sure.

It's hard to conclude anything without a proper example, which includes:

• The svg, css and YAML
• A preview

Please help with the readablity by formatting the code like:

I'd also like to mention the full_height option: https://experiencelovelace.github.io/ha-floorplan/docs/how-to-handle-size-and-expand-floorplan/#panel-mode-with-full_height-in-yaml-mode