How to make a card wider using 'layout-card'?

mkanet · March 12, 2022, 10:03pm

I currently have a webpage card I added as a “panel” view. However, I can’t figure out how to modify layout-card to be able to take up 80% of the web browser width.

Below, is my attempt a doing this… however, it’s obviously wrong. Could someone please tell me what I’m doing wrong?

type: 'custom:layout-card'
layout: vertical
column_width: 80%
cards:
  - type: iframe
    url: /local/log.html
    aspect_ratio: 100%
    title: HORIZON - Windows Updates

mirekmal · March 13, 2022, 10:51am

Well, panel is what is it is… it always takes whole page width. If you want to have narrower card, you need to create 3 columns grid (10%, 80%, 10%) and place your card in the middle one.

mkanet · March 13, 2022, 5:08pm

Thanks. But how do I hide the 10% columns?

mirekmal · March 13, 2022, 9:33pm

Hm… then I’m confused… If you hide the 10% columns, your 80% column will become again 100% wide… What exactly do you want to achieve? Can you show some mockup?

mkanet · March 13, 2022, 10:14pm

The same thing as adding a single card to a regular default view… except, wider. Only 10% side margins.

dexstar · March 14, 2022, 7:24am

Try like this my friend. Set your Edit View Settings options and Save.

Then add a Manual Card and paste in this code

type: custom:layout-card
layout_type: custom:vertical-layout
cards:
  - type: iframe
    url: https://www.home-assistant.io
aspect_ratio: 100%
layout:
  width: 1100
  max_cols: 1

Results in this

Change the width to your liking to suit your device. The above value was for a wide screen TV, so will not be suitable for a phone/tablet setup. Maybe start with a smaller value and increase gradually to suit your device.

All the best. Let me know how you go with it

mirekmal · March 14, 2022, 7:47am

OK, so here is sample code you can use (dashboard in Panel mode, as @dextar described in post above):

type: custom:layout-card
layout_type: custom:grid-layout
layout_options:
  grid-template-columns: 10% 80% 10%
  grid-template-rows: auto
  grid-template-areas: |
    "left middle right"
cards:
  - type: custom:gap-card
    view_layout:
      grid:area: left
    # here your actual card(s) goes
  - type: entities
    entities:
      - entity: light.attic_stairwais_light
      - entity: light.basement
    view_layout:
      grid:area: middle
  - type: custom:gap-card
    view_layout:
      grid:area: righ

Resylt loos like that:

mkanet · March 15, 2022, 3:46am

Wow, thank you so much for this. It is exactly what I wanted!

PS: I found a simpler way to do this without having to use 2 gap cards and dealing with YAML formatting. I just learned about Grid view types.

Create a “Grid (layout-card)” view from the Dashboard; adding the 2 lines in the respective blank field:

   grid-template-columns: 80%
   place-content: center

Add my webpage card.

mkanet · March 15, 2022, 3:47am

Thank you so much. I really appreciate your help!

mirekmal · March 15, 2022, 8:47am

Good to see it workd for you… Seems I also need to review some coponents I’m using as apparently new functionalities arived!

gr1nch · October 11, 2022, 7:56pm

Thanks! Worked perfectly for me too, optimising the layout for our wall tablets.

cbad536 · February 8, 2023, 10:44am

Thanks for this guys.

Settings>Dashboards>Resources shows /local/card-mod.js, so I think I’ve got it downloaded correctly.
When I click on it, the window has ‘update’, not ‘create’

I think this means I’ve already successfully created it.

When I go to my dashboard>Edit Dashboard>Add Card I don’t find anything under ‘layout card’
I created a new dashboard in panel move, and tried to add a manual card, as shown in previous posts.
Here’s what I get:

Where did I go wrong??
CB

dexstar · February 8, 2023, 9:46pm

Did you try clearing cache and restarting ?

Or perhaps try reinstalling again.

smenzer · March 12, 2023, 3:49pm

this worked perfectly for me, thanks!!

marcosvenasc · October 21, 2023, 2:56am

Hello

Could you help me with a question?

I m using custom:vertical-layout to create three columns, but the first column is not wider than the others.

title: home
views:
  - path: default_view
    title: Home
    type: custom:grid-layout
    badges: []
    cards:
      - square: true
        type: grid
        cards:
          - type: custom:layout-card
            layout_type: custom:vertical-layout
            layout:
              grid-template-columns: 10% 80% 10%;
              margin: '-5px;'
            cards:
              - type: entity
                entity: sensor.sun_next_dusk
                style: |
                  ha-card {
                    margin: 2px;
                  }
              - type: entity
                entity: sensor.sun_next_dusk
                style: |
                  ha-card {
                    margin: 2px;
                  }
              - type: entity
                entity: sensor.sun_next_dusk
                style: |
                  ha-card {
                    margin: 2px;
                  }
              - type: media-control
                entity: media_player.spotify_livia_ponciano
                style: |
                  ha-card {
                    padding: 2px;
                  }
            style: |
              ha-card {
                aspect_ratio: 10%
              }   
          - type: picture
            image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
            tap_action:
              action: none
            hold_action:
              action: none
          - type: weather-forecast
            entity: weather.forecast_casa
            forecast_type: daily
        columns: 3