🔹 Layout-card - Take control of where your cards end up

Steveuk · October 10, 2022, 3:24pm

Thanks.
Yeah the majority of it is in the tablet files you can see HERE with some bits in other yamls.
I can’t remember how up to date my GitHub is so if you want something let me know

xbmcnut · October 10, 2022, 8:08pm

That’s awesome, thank you so much. Can you tell me where you defined your gird layout though please?

Steveuk · October 10, 2022, 8:38pm

Yeah that’s in my main tablet.yaml file HERE i need to reorganise my files tbh just not got round to it.

xbmcnut · October 10, 2022, 9:34pm

Ah, I see now. Thank you again.

mibane · October 11, 2022, 1:49pm

Same here. I was eager to play with the new subview functionality and ended wondering why I cannot change the view layout anymore:

In addition, I have reinstalled the Layout-card add-on but with no success. So I also suspect that this malfunction may have something to do with the recent HA 2022.10.x update.

andiukas · October 12, 2022, 5:20am

click on the three dots at the top and you will find a solution to your problem

mibane · October 12, 2022, 5:41am

Do you mean that I have to edit it in YAML? These are my two options when I click on the 3 dots:

grafik

andiukas · October 12, 2022, 7:28am

Yes my friend

mibane · October 12, 2022, 7:52am

Thank you for the clarification, @andiukas! It seems that I had not understood the earlier posts…

In principle, I have no problem with YAML, but this is a step backwards in usability for me. I hope that a GUI selectable layout option will return one day.

Dear Thomas @thomasloven,

Can you please provide a clearer explanation on your GitHub page? Although there is a short note

Please note that the “LAYOUT” tab in the animation below is now incorporated in the “SETTINGS” tab instead.

the obviously outdated video suggests that there could still be a layout setting accessible via the GUI somewhere in the settings tab. At least I got confused by it. Many thanks!

rog889 · October 20, 2022, 12:29am

Hi,

I wonder if I can get some help with the height of iFrame card. I was able to put the Sonos card next to the iFrame page. Please see photo below. However, the iFrame webpage (ActionTiles) is very short. I looked at the GitHub documentation, and it’s not very clear to me how I can make the ActionTiles dynamic or much much longer so I can have the iFrame can touch all the way down to the bottom of the screen. I put the yaml code below. Can anyone please help me how I can make iFrame longer?

type: custom:layout-card
layout_type: custom:grid-layout
layout_options:
  grid-template-columns: 80% 20%
  grid-template-rows: auto
  grid-template-areas: |
    “left right”
cards:
  - type: iframe
    url: https://beta.actiontiles.com/panels
    aspect_ratio: 50%
  - type: custom:mini-media-player
    entity: media_player.sonos
    artwork: full-cover
    sound_mode: full
    info: scroll
    scale: 1.7

janiv · October 21, 2022, 1:29pm

Hi,
How do I force the layout not to have space.
I would like the ‘Libby’ card stick to the ‘General’ one without the gap.

Thanks

stepea · October 21, 2022, 2:44pm

can’t you just put both cards into a vertical stack ?

janiv · October 21, 2022, 2:46pm

Yes, but I’ll have one long card.
I’d like later to add a frame around each of the cards. BTW, how do I do it?

Ghafla · October 26, 2022, 10:16pm

Does anyone still use the type: custom:horizontal-layout for a view?
My - type: custom:layout-break cards don’t do anything; the next card gets placed behind the previous one as if the layout-break card didn’t exist.
If I use

    view_layout:
      column: 1

for the next card, it gets placed in column 1 BUT as the row fills up, the upper rows (where the “break” was set) now get filled too! WTF?

I would want this layout (numbers represent cards):

D1 D2 D3
E1 E2 E3 E4 E5 E6
K1 K2 K3 K4 K5

but I get:

D1 D2 D3 E4 E5 E6
E1 E2 E3 K4 K5
K1 K2 K3

Grid layout is no option since I have so much different screen sizes (mediaquery would drive me nuts).

So how do I Take control of where your cards end up?
Gimme a break!

eggman · October 27, 2022, 2:49am

Have you tried gap card, it come with layout card?

Ghafla · October 27, 2022, 5:00am

Yep, it works as expected - creates a gap below (even in horizontal layout) the previous card.
No use for my case since the next card gets placed right of it.
Dunno where I went wrong…

eggman · October 27, 2022, 6:44am

views:
  - theme: Backend-selected
    title: Home
    path: home
    type: custom:horizontal-layout
    layout: {}
    icon: mdi:home-automation
    badges: []
    cards:
      - type: entity
        entity: sensor.visual_studio_code_cpu_percent
      - type: entity
        entity: sensor.visual_studio_code_memory_percent
      - type: custom:gap-card
        height: 93
      - type: custom:gap-card
        height: 93
      - type: custom:layout-break
      - type: entity
        entity: sensor.mariadb_cpu_percent
      - type: entity
        entity: sensor.mariadb_memory_percent
      - type: entity
        entity: sensor.node_red_cpu_percent
      - type: entity
        entity: sensor.node_red_memory_percent
      - type: custom:layout-break
      - type: entity
        entity: sensor.deconz_cpu_percent
      - type: entity
        entity: sensor.deconz_memory_percent
      - type: entity
        entity: sensor.esphome_cpu_percent
      - type: entity
        entity: sensor.esphome_memory_percent

eggman · October 27, 2022, 6:53am

Just remembered you wanted more columns, and you don’t even need the break cards necessarily.

views:
  - theme: Backend-selected
    title: Home
    path: home
    type: custom:horizontal-layout
    layout:
      max_cols: 7
    icon: mdi:home-automation
    badges: []
    cards:
      - type: entity
        entity: sensor.visual_studio_code_cpu_percent
      - type: entity
        entity: sensor.visual_studio_code_memory_percent
      - &ref_0
        type: custom:gap-card
        height: 93
      - *ref_0
      - *ref_0
      - *ref_0
      - type: entity
        entity: sensor.mariadb_cpu_percent
      - type: entity
        entity: sensor.mariadb_memory_percent
      - type: entity
        entity: sensor.node_red_cpu_percent
      - type: entity
        entity: sensor.node_red_memory_percent
      - type: entity
        entity: sensor.deconz_cpu_percent
      - type: entity
        entity: sensor.deconz_memory_percent
      - type: entity
        entity: sensor.esphome_cpu_percent
      - type: entity
        entity: sensor.esphome_memory_percent
      - type: entity
        entity: sensor.glances_cpu_percent
      - type: entity
        entity: sensor.glances_memory_percent
      - type: entity
        entity: sensor.home_assistant_google_drive_backup_cpu_percent

to be fair, this would be neater with grid layout

this layout wouldn’t work on a small screen anyway. For all the many devices i and my family own I never use more than a default and two media queries for smaller screens.

Ghafla · October 27, 2022, 7:55am

Thanks for your reply.
I never thought of using more than one custom:gap-card…
Nonetheless I want the cards to align themselves according to the current screen resolution. I never know in advance how much columns would fit (the card widths differ slightly too).
It would be great if there was a possibility to tell the custom:horizontal-layout to not use the space after a custom:break-card…
I even tried custom:vertical-layout with three different custom:layout-cards of layout_type: horizontal-layout - nothing.

eggman · October 27, 2022, 8:40am

You posted a screenshot of an exact number of columns, now you say you want it to alter depending on screen size.

The best way to do that is with a grid layout (as I said above), you don’t need to have different for every device just choose default 5 columns, smaller than x three columns, smaller than z 1 column

Add for 4 or 2 if you want