Lovelace custom element: full width

Development
1

Hi all,

Is it possible to create a custom Lovelace card that takes 100% of screen width?

Why? I want to create a digital bedside clock which goes full screen at night with large digits (so easy to read) and smaller between 21h and 23h so I can then show some extra cards (weather, lights that are still on, … )

Thanks,
Ronald

2

Yes, under the title of a view add panel, that will make the first card screen width.
But Badges won’t show with panel: true for me.

title: My Awesome Home
views:
  - title: info
    panel: true
6 Likes
3

How are you going about adding a clock display to the interface?

Are you also planning on hiding the top blue menu bar? I’m trying to find away to hide that.

4

No, it would still be there… But, just started so. I’ll keep you posted once it is available

5

I found this, which may be of use if you do want to hide the blue bar.

Haven’t tested it myself yet, but likely will later today.

1 Like
6

I’ve updated that script to hide side bar as well

7

I’ve got it working (running on a Nexus 7), but after some time (I assume the page refreshes) the blue bar returns.

8

It depends if you loose the kiosk word from query. Can you try with that in view id?

9

When using panel: true in my ui-lovelace.yaml the first card is full width as expected
But it is then hiding any cards that i’ve specified underneath

  - title: Smart Home
    panel: true
    cards:
      - cards:
        - card:
          type: glance
          title: Components
          columns: 12
          entities:
            - entity: sensor.count_automations
              name: Automations
              icon: mdi:autorenew
              tap_action:
                action: call-service
                service: automation.reload
            - entity: sensor.count_scripts
              name: Scripts
              icon: mdi:script-text-outline
              tap_action: none
      - cards:
         - card:
           type: light
           entity: light.living_room_lamp
           name: Living Room
         - card:
           type: light
           entity: light.dining_room_lamp
           name: Dining Room
        type: horizontal-stack
      - cards:
         - card: light
           type: light
           entity: light.hallway_lamp
           name: Hallway
        type: horizontal-stack
    type: 'custom:vertical-stack-in-card'

Is there something I’ve missed? I’ve tried replacing the panel: true in different positions but with no joy

10

I’ve managed to get this working now!

  - title: Smart Home
    panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: glance
                title: Components
                columns: 12
                entities:
                - entity: sensor.count_automations
                  name: Automations
                  icon: mdi:autorenew
                  tap_action: 
                    action: call-service
                    service: automation.reload
                - entity: sensor.count_scripts
                  name: Scripts
                  icon: mdi:script-text-outline
                  tap_action: none
          - type: horizontal-stack  
            cards:
              - type: light
                entity: light.hallway_lamp
                name: Hallway
11

Thanks, JT this worked perfectly for me.