Add CSS support specifying container height

tgallacher commented 2 years ago

What

Add support to the layout key for specifying the CSS height property of the root container, <grid-layout> custom component.

Users can now do something like:

- type: custom:grid-layout
    layout:
      height: 100%
      ...

Why?

I am trying to make a layout where a "footer" is permanently fixed at the bottom of the screen, regardless of how much content is in the content area. The simplest way to achieve this is by ensuring the base container -- the custom HTML element -- takes the full height of the panel.

But, as this component doesn't expose this -- or a similar styling option -- and isn't compatible with the card_mod custom component, then we need to expose this directly.

Example of layout with the above change:

Notes

I have also added a separate change to default the custom HTML component to display as a "block-level" element, to better mimic structure -like HTML elements, such as div, section, main, etc.
I have made the new height layout property optional instead of the default to avoid potentially breaking the wide range of uses this component is likely deployed

tgallacher commented 2 years ago

cc @thomasloven 🙏

Drealine commented 2 years ago

Hi,

How can I set this mannualy please ?

tgallacher commented 2 years ago

Hi,

How can I set this mannualy please ?

@Drealine Not sure of your dev background, so I'll just keep it high level at first -

To get this version manually, you would have to:

Check out the branch on my Github fork
Install the deps for the project
Build the project to get the JS file
Manually add that JS file into your HA set up using the "resources" settings

Let me know if you need more details on how this would actually look.

thomasloven commented 2 years ago

Hi. This is a great idea, and I really like it. I just implemented some other functionality that lets this be done in a different way, and for the grid-based layouts too, though, so I'll rewrite your solution into that. Hope you don't mind.

It will be in the next release.

Thanks a lot, @tgallacher!

Drealine commented 10 months ago

Ok but what can I do that now ? Readme not give an example!

Drealine commented 10 months ago

Please reopen the PR, I can't find a solution to container height. @tgallacher

thomasloven / lovelace-layout-card