Lovelace - Allow a card to use entire page width

Feature Requests
1

Working with Lovelace is a real pleasure. One thing that is currently not possible is to have a single card use 100% or the horizontal space. This could be used in conjunction with stack function and a command similar to the glance column-width:

column_width: calc(100% / 7)

This could be used for the whole page with any type of card with this kind of command:

page_width: calc(100% / 1)

This would be particularly useful for displaying images, such as CCTV cameras or maps.

[SOLVED] See next post by JTPublic

2

Are you talking about a card going 100% page width, or a column in a card with 100% page width? The former can be done for the first card with panel: true in each view.
I stack my cards into one (vertical/horizontal), then panel: true to span the page width.
FYI, badges will not show with the panel option.

4 Likes
3

I never thought about using panel: true and horizontal-stack that way. Thanks for the idea!

1 Like
4

Thanks for this. I mean a card with 100% page width. I just tried panel: true, but can’t get this working as follows:

views:
  - title: Home
    id: home
    background: radial-gradient(white, black)
    theme: default
    cards:
      - type: iframe
        panel: true
        url: https://embed.windy.com/embed2.html?lat=-8.574&lon=115.383&zoom=10&level=surface&overlay=waves&menu=&message=true&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=-8.623&detailLon=115.431&metricWind=km%2Fh&metricTemp=default&radarRange=-1        
        aspect_ratio: 100%

What am I doing wrong?
Can you please provide an example code with a card using 100% page width?

5

OK, got it working with:

views:
  - title: Home
    id: home
    background: radial-gradient(white, black)
    theme: default
    panel: true
    cards:
#       - type: markdown
#         title: Lovelace
#         content: >
#         Welcome to Padang Bai.
      - type: iframe
        url: https://embed.windy.com/embed2.html?lat=-8.574&lon=115.383&zoom=10&level=surface&overlay=waves&menu=&message=true&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=-8.623&detailLon=115.431&metricWind=km%2Fh&metricTemp=default&radarRange=-1        
        aspect_ratio: 75%

Problem is that I only seem to be able to display the first card… Other cards disappear! Care to share your code?

NB: Other cards disappeared as I had a map as a first item. Going down the page meant changing the zoom level…

2 Likes
6

This does work with an overarching vertical stack followed by encapsulated cards, horizontal and vertical stacks. It’s a bit messy and cumbersome setting this up in that way.
Thankfully we can see code changes to Lovelace UI without a restart.
Thanks to @JTPublic for this!

7

Thanks for figuring this out and posting. I wish there was a way to span more than one column, especially at the bottom rather than top.

Mostly unrelated, but I see you’re using an iframe for windy weather map. Do you have to reload the page to get it to update, or have you figured out some way for it to auto-update?

8

‘’ page_width: calc(100% / 1) ‘’ doesnt work for me …is this deprecatred? in 0.115 version?