Lovelace custom element: full width

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

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

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.

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

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

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

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

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

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

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

Thanks, JT this worked perfectly for me.