full_height not working

[narrcom]

I'm using Kiosk Mode from HACS to make it full screen on my tablet, there seems to be an issue causing it leave a strip across the bottom of the screen. My question is if this is caused by "Kiosk Mode" or "ha-floorplan"..?

[exetico]

Have you tried another card, and did that leave the same 'strip'? //Tobias (from mobile) søn. 7. feb. 2021 21.47 skrev narrcom <notifications@github.com>:

…

I'm using Kiosk Mode from HACS to make it full screen on my tablet, there seems to be an issue causing it leave a strip across the bottom of the screen. My question is if this is caused by "Kiosk Mode" or "ha-floorplan"..? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#46>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA3CSBKVTZQTLPUESYMBBVDS5335XANCNFSM4XH2XWKA> .

[pkozul]

@narrcom

The Floorplan card does do some height calculations, based on whether you've configured the card to display the title or not. Below is the CSS that applies to both cases. As you can see, the height of the card is based on the full screen height minus some other height in pixels. Maybe these calculations do no work in your setup. Can you provide a screenshot?

      :host .content.with-title-panel-height {
        height: calc(100vh - var(--header-height) - 78px);
      }

      :host .content.without-title-panel-height {
        height: calc(100vh - 86px);
      } 

[narrcom]

I might be wrong but I think the issue is being caused because "Kiosk Mode" is hiding the header after the page has loaded.

I have a workaround that seems to work...

• I made my floorplan.svg ratio match my tablet screen ratio.
• i set full_height option to false.
• and added margin the following in my css file.

#floorplan  {
  padding: 0px;
  margin: -30px 0px 0px 0px;
}

[narrcom]

PS/ this issue is caused by Kiosk Mode loading after ha-floorplan it is not an issue with ha-floorplan...

I will try and come up with a better solution and post it for anyone else who is interested...

[narrcom]

UPDATE:

• It appears that h1.card-header is consuming 28px of vertical real-estate at the top. (ha-floorplan issue)
• also 56px of vertical real-estate is lost at the bottom if the tabs header is hidden. (needs to dynamically adjust like official ha does)

QUICK FIX:

• note the card background doesn't extend to the bottom.
• add margin: -28px 0px -56px 0px; to #floorplan in your css file.

[exetico]

Do you think we can do something to make this better, or should this be accepted as the solution? :-)

[pkozul]

Hi @narrcom

We've improved full_height support in floorplan, so kiosk mode should now work much better. Can you try the new version (v1.0.20)?

https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/master/dist/floorplan.js

Just make sure to set full_height: true in your floorplan card config.

Let us know how you go.

[exetico]

Hi @narrcom

It's now pushed to the newest release, thanks to phozul.

https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.20

[pkozul]

@narrcom Can you check that the new version is now working as expected?