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

Dapolux · February 18, 2021, 6:29pm

Hello,

I’m facing some issues with margins on a reduced resolution devices (smartphone with 414 pixels width). So i have a global horizontal card (on panel view), +1 grid for the content. Should i act somewhere to specify a minimum margin? (knowing that on a desktop view, all is fine). I feel that i miss something (or maybe i should rebuild the layout hierarchy).

On the desktop view, it is correct:

But on the smartphone, i lose the margins:

Here is the used code:

button_card_templates:

  ###############   Master template   ################
  base:
    aspect_ratio: 1/1
    show_icon: false
    state:
      - value: 'on'
        styles:
          card: [background-color: 'rgba(255, 255, 255, 0.8)']
          name: [color: 'rgba(0, 0, 0, 0.6)']
    styles:
      name:
        [top: 78%, left: 10%, line-height: 100%, position: absolute]
      card:
        - font-family: Sf Display
        - letter-spacing: 0px
        - font-weight: 400
        - color: 'rgba(255, 255, 255, 0.3)'
        - font-size: 110%
        - background-color: 'rgba(115, 115, 115, 0.4)'
        - border-radius: 10%
        - box-shadow: none
        - transition: none
      custom_fields:
        circle:
          [top: 12%, left: 54%, width: 40%, position: absolute]
    hold_action:
      action: more-info 


views:

            
################################################################
################################################################
#                     Test
################################################################
################################################################
  - title: Test
    path: test
    badges: []
    panel: true
    cards:
    #### Toute la page
    - type: custom:layout-card
      layout: horizontal
      
      cards:
      ##### Bloc
      - type: custom:layout-card
        layout: grid
        gridcols: auto auto auto auto
        cards:
          - type: 'custom:button-card'
            entity: light.cuisine
            template: base
            name: Cuisine

          - type: 'custom:button-card'
            entity: light.cuisine
            template: base
            name: Cuisine          

          - type: 'custom:button-card'
            entity: light.cuisine
            template: base
            name: Cuisine
            
          - type: 'custom:button-card'
            entity: light.cuisine
            template: base
            name: Cuisine
          
          - type: 'custom:button-card'
            entity: light.cuisine
            template: base
            name: Cuisine

danielo515 · February 21, 2021, 1:16pm

can someone explains me how the column system works? I read the documentation and I can’t figure it out.
It doesn’t works like any other system that I’m familiar with like flexbox or grid.

Thanks

not_a_coder · February 21, 2021, 7:39pm

Does anyone know what the best landscape settings be for a wall mounted Fire HD 10 2019 display are? I have a hard time figuring out what to put where and why. Do I use percentages or pixels or is that information even needed. I do know that the cards I have without this card fit best with two columns. Would auto layout and two columns be all I need to specify with this card?

thomasloven · March 14, 2021, 3:03pm

Layout-card 2.0.0 has just been released.

It has some new cool features, and significant performance improvements.

But it’s entirely breaking.
Read the readme before upgrading!

ASNNetworks · March 14, 2021, 5:05pm

Hi, so I read the ReadMe, but I can’t get my old setup to work with the new format. Perhaps I’m missing something, or maybe the feature is no longer working. I used layout-card inside a vertical-stack and lovelace with panelmode to true. The reason I did this, is because I have a custom made top and bottom bar with icons and notifications and in the center all my cards. I needed the cards to be a smaller width to not touch the borders of my screen. So basically:

type: vertical-stack
cards:
  - TOP BAR CARDS
  - LAYOUT CARD (at 96% column_width)
  - BOTTOM CARD CARD

This was my previous code for layout-card and worked great.

          - layout: vertical
            type: 'custom:layout-card'
            column_width: 96%
            cards:

I tried converting this to the new setup with following code:

          - layout_type: vertical
            type: 'custom:layout-card'
            layout_options:
              column_width: 96%
            cards:

Everyhing shows up fine, however the column_width does not work. I notice in your new ReadME it doesn’t list column_width as an option anymore. I tried just width and max_width and though it does somehow make it a little narrower and looks as I had, the code doesn’t seem to work. Setting to 90% as a test, shows same width as 96%.

I also tried:

          - layout_type: masonry
            type: 'custom:layout-card'
            layout_options:
              max_width: 90%
              max_cols: 1

Am I doing something wrong or is it somehow not supported anymore? I use percentage instead of pixels because I want it to work on numerous devices with different resolutions (which worked great). Also everything does show up fine in panel mode, so that works fine too now.

thomasloven · March 14, 2021, 7:16pm

Many options have been removed for maintainability and to work with new features of Lovelace.

For more fine-grained control, please try the grid layout instead.

fastfreddy272 · March 14, 2021, 8:00pm

V2 seems not to work in Fully Kiosk and in the andriod app.

Rectification: It is working in both now. Probably related to wiping cache, …

thomasloven · March 14, 2021, 8:19pm

2.1.0 alows for fully responsive layouts:

Mariusthvdb · March 14, 2021, 9:07pm

HI,
Could it be layout card is not compatible with Brams’ swiper-card?

this is without Layout card (check the 1 Alert):

and this is using:

type: custom:horizontal-layout

on the view:

woodmj74 · March 14, 2021, 9:17pm

@thomasloven just wanted to thank you for this latest release.

Still getting to grips with it but awesome to have the layout at view level so you can get back to the UI for individual cards.

ASNNetworks · March 14, 2021, 9:30pm

Swiper card works with me using 2.0 update. I have a lot of elements inside swiper-cards and all work fine. I use vertical layout btw.

fmon · March 14, 2021, 11:08pm

Someone please help me here… This yields a blank page. All that I’m trying to do is create two columns that are different sizes. I’ve tried this a dozen different ways and in fact I can’t get any of the new card types to show up at all.

title: css_testing
icon: mdi:test-tube
background: 'center fixed repeat url("/local/pics/smoke.jpg")'
panel: true
cards:
  - title: "test"
    type: custom:grid-layout
    layout:
      grid-template-columns: 2fr 1fr
      grid-template-rows: auto
      grid-template-areas: |
        "left right"
    cards:
      - type: entities
        layout:
          grid-area: left
        show_header_toggle: false
        entities:
          - entity: light.foyer
      - type: entities
        layout:
          grid-area: right
        show_header_toggle: false
        entities:
          - entity: switch.big_lamp

thomasloven · March 15, 2021, 6:56am

See any significant differences?

Mariusthvdb · March 15, 2021, 8:15am

yeah thanks that is great to know.
I guess the issue is with the horizontal layout in that case, so the question stands
this is my swipe-card config:

    - type: custom:swipe-card
      parameters:
        spaceBetween: 8
        effect: coverflow
        grabCursor: true
        centeredSlides: false # to have the swipe card start left side
        slidesPerView: 4 # to auto render the correct size of the buttons, 4 in a row always
        coverflowEffect:
          rotate: 50
          depth: 100
          modifier: 1
          slideShadows : true
        pagination:
          type: bullets
          hideOnClick: true
      cards:
        !include /config/lovelace/buttons/buttons_alerts_swipe.yaml

having it display for cards by default, even if there are less than 4 (to have the button-cards it displays always show the correct format of 4 in a row)

to give you an idea, the button_alerts_swipe lists the conditional button-cards like:

etc
etc
- type: conditional
  conditions:
    - entity: binary_sensor.updater_notification
      state: 'on'
  card: !include /config/lovelace/includes/include_button_updater.yaml

- type: conditional
  conditions:
    - entity: binary_sensor.addon_updates_available
      state: 'on'
  card: !include /config/lovelace/includes/include_button_addons_updates_available.yaml

- type: conditional
  conditions:
    - entity: binary_sensor.meteoalarm_brabant
      state: 'on'
  card: !include /config/lovelace/includes/include_button_meteoalarm_alert.yaml

- type: conditional
  conditions:
    - entity: binary_sensor.hubs_offline
      state: 'on'
  card: !include /config/lovelace/includes/include_button_sensor_hubs.yaml

- type: conditional
  conditions:
    - entity: binary_sensor.critical_devices_offline
      state: 'on'
  card: !include /config/lovelace/includes/include_button_critical_devices.yaml

- type: conditional
  conditions:
    - entity: binary_sensor.espresso_needs_refill
      state: 'on'
  card: !include /config/lovelace/includes/include_button_espresso.yaml

etc
etc

ASNNetworks · March 15, 2021, 8:47am

Could you perhaps assist me to create that in grid? I only need a vertical stack but with the column set to 96%. I tried myself but can’t get it to work.

dmatik · March 15, 2021, 12:57pm

Hi,
Thank you for the great update!
I create a nice layout using grid type in you card to fit 3 buttons in a row when on iPhone, and 5 buttons in a row when on bigger screens, which works perfectly.
This is the code:

  - type: custom:layout-card
    layout_type: grid

    layout_options:
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr
      grid-template-rows: auto
      grid-gap: 0px 2px
      mediaquery:
        "(max-width: 450px)":
          grid-template-columns: 1fr 1fr 1fr

However it always seems that the row height is slightly bigger then width, although the button inside is always with ratio 1/1.
Can you please advise if there is an option to set each item ration to 1/1, or maybe limit the height to be exactly as contained button inside?

Thanks in advance.

noxx · March 15, 2021, 1:00pm

layout card is installed with HACS

but i ve no layout tab

…empty:

ASNNetworks · March 15, 2021, 1:13pm

Sorry to ask a question instead of providing an answer. But I think you have experience and can help me judging by your code.

Can you help me in how to create a layout card using grid that consists of only one column with a max width of 96%? Basically my goal is to have a column that is 96% of the screen width.

The previous card version could do that with vertical layout mode and had it working. But now with 2.0 I need to use grid layout according to card developer. It does not work with previous code.

dmatik · March 15, 2021, 1:40pm

Hi,
I myself only started to learn the grid options, Thomas actually put link to CSS Grid page which was a big help, suggest you to go over it.
Having said that, you can try something like this:

  - type: custom:layout-card
    layout_type: grid

    layout_options:
      grid-template-columns: 96%
      grid-template-rows: auto

    cards:

ASNNetworks · March 15, 2021, 3:51pm

Thanks, that works ! I’m new to CSS and learning some stuff and will checkout grid. Thanks for your help!