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

skank · May 6, 2020, 9:36am

i’m using this in combination with a custom upcoming media card

cards: 
  - type: custom:layout-card
    layout: vertical
    min_columns: 1
    max_columns: 3
    cards:
      - type: custom:upcoming-media-card
        entity: sensor.emby_latest_films
        title: Laatste Films
        image_style: fanart
        line1_text: '$release'
        line2_text: '$genres'
        line3_text: '$rating - $runtime'
        line4_text: '$studio'
        title_size: medium
        line_size: small

However, the upcoming card uses too much space.
Can i fix this with the layout card?

Does max_height work? or is it only for width? or grid-rows?

edersong · May 8, 2020, 1:48pm

Hi folks,
The instructions says to configure resource url to ‘/local/layout-card.js’ but the HACS automatically registered it as ‘/hacsfiles/lovelace-layout-card/layout-card.js’ and the layout-card.js is located at ‘/config/www/lovelace-layout-card/layout-card.js’
My problem is that the layout-card is not working and its reporting the following: Custom element doesn’t exist: layout-card
How I can configure it correctly at resources?

Thank you in advance, Ederson Santos

thomasloven · May 8, 2020, 6:50pm

The instructions says to see this guide.

mirekmal · May 13, 2020, 1:35pm

I feel stupid, but I just can’t get it to work… Even simple copy/paste of one of very first cases from this post does not work for me… I set up new view just for testing, made it panel view, added within this view just one layout-card and here is the code I use:

type: 'custom:layout-card'
layout: vertical
column_width: 100%
max_columns: 3
max_width: 250px
cards:
  - type: markdown
    content: Dummy 1
  - break
  - type: markdown
    content: Dummy 2
  - break
  - type: markdown
    content: Dummy 3
  - break
  - type: markdown
    content: Dummy 4
  - break
  - type: markdown
    content: Dummy 5
  - break
  - type: markdown
    content: Dummy 6
  - break

The only difference to sample code from previous posts is that I added column width, to show how much space is available for additional columns. Here is the result:

Whatever I try to do I end up with single column. I tried auto and horizontal layout - the same result. The only option that seems to help is to add min_columns and the number of displayed colums increaes to specified number, but again is not dynamic (it does not increase to 3 when enough space or not reduce to 1 in very narrow window.I’m on the latest version of card (just installed from HACS) and HA (0.109.6). Please help!

thomasloven · May 13, 2020, 1:40pm

The readme says:

Since layout-card is a card in it self its area of effect will be limited to the width of a card, and thus you will (almost) always want to use it in panel mode:
views:
  - title: My view
    panel: true
    cards:
     - type: custom:layout-card
       ...

mirekmal · May 13, 2020, 2:33pm

@thomasloven, yes, I know… I use panel mode! Here is the full code from Raw Editor:

preload_cards:
  - markdown
  - gauge
  - stack-in-car
  - bar-card
  - mini-graph-card
preload_rows:
  - divider
views:
  - badges: []
    cards:
      - cards:
          - content: Dummy 1
            type: markdown
          - content: Dummy 2
            type: markdown
          - content: Dummy 3
            type: markdown
          - content: Dummy 4
            type: markdown
          - content: Dummy 5
            type: markdown
          - content: Dummy 6
            type: markdown
        column_width: 100%
        layout: horizontal
        max_columns: 5
        max_width: 250px
        min_columns: 1
        type: 'custom:layout-card'
    panel: true
    path: esxi
    title: ESXi

If I remove max_width parameter it will look like this:

reste_narquois · May 13, 2020, 4:09pm

In your last code example, I can’t see any

- break

between the markdown cards to start a new column (although they were in your first example, so maybe it’s not the issue)

mirekmal · May 13, 2020, 4:28pm

Yeah… I was playing with code in meantime… breaks were in the original post, in the one I pasted in second one I removed them, but in recent one I also changed layout to horizontal (BTW tested auto too)… but it didn’t helped either.

It makes me thinking if there is something fundamentally wrong with my installation/configuration. I started to play with layout-card, because I faced this very issue in my other views, where cards were not properly ordered, but aligned into single column. Though I linked it to use of custom stack cards, that apparently have issues with calculation of dimentions (as I read in some other post). So I wanted to force proper layout by moving my config to layout-card, but faced exaclty the same problem already during the test, without even moving more complex configurations into. So perhaps it is sort of ‘global’ problem for me…

thomasloven · May 13, 2020, 5:29pm

column_width: 100%
max_columns: 3
max_width: 250px

Your choices for column width and max_width fight against each other.

Here’s what layout card does with those instructions:
1: Start with 0 columns and 0% screen used.
2: Check if there are less than three columns. If not, finish.
3: Check if there’s room for one more column with width 100% of the screen. If not, finish.
4: Add a column that uses 100% the width of the screen. Set that column to render no wider than 250px.
5: Goto 2

mirekmal · May 13, 2020, 5:49pm

Oh, I got my issue resolved! As expected stupid typo… instead of dash I used underscore in column_width…

Regarding selection of column-width and max_width…well, once I corrected my typo it works as I expected! It simply limits width of cards inside column, so even if there is a space in view columns do not expand further neither create additional column… Perhaps being lucky

Anyhow thanks a lot for help!

eggman · May 13, 2020, 7:14pm

If you mean you went from column_width to column-width, then you’ve made it invalid (it should an underscore), thereby removing the clash that Thomas explained in his post.

Hurde · May 16, 2020, 11:28am

I am using layout-card with vertical layout and breaks to group my cards in to three different columns. As layout-card is used with panel: true, it is not possible to use badges in the view with layout card.

Are there any workarounds to use badges or achieve badge-like functionality with this setup? I was thinking of utilizing gap-cards and a card that displays the badge content, but if there are better ideas, I’m all ears.

eggman · May 16, 2020, 2:41pm

you could put badges in a picture-elements card, ‘state_badge’ I think. Then use card-mod to hide the picture elements background & borders.

If you want them all across the top of your view, then you could put the picture-elements card 1st with your current layout card 2nd in a card that will do a vertical stack such as nesting it in another layout-card, using stack-in-card (which removes the need for card-mod), or just a vertical-stack.

You could do the same layout with layout-card in grid mode but for this case, it might be simpler just to nest cards.

Then picture elements will be full width with your 3 columns of layout-card below.

Mariusthvdb · May 16, 2020, 3:13pm

not to be off topic in this thread, (and it won’t solve your issue here) but since you posted:
there’s a typo in your stack-in-carD line.

also, since the custom card hui-element was introduced, there seems to be no more issue on ‘non-existing’ cards and the preloading isn’t required anymore.

Have a look and see if it helps you?

mirekmal · May 16, 2020, 5:41pm

@Marius you are perfectly right! I was fiddling in meantime with my whole UI configuration (after discovering benefits of layout-card) and as result I discarded completely preload_cards (but to be honest did not noticed typo ) and added hui-element instead wherever needed. Works perfectly now. I wish some of these functionalities are part of core rather than add on… makes live so much easier!
Drawback of using layout card is that now whole view becomes single card, so there is a lot to be displayed in UI editor and it is just not capable of dealing with such amount of informaiton (my biggest view have now ~1100 lines of code and browser is constantly refreshing preview part and quite frequently crashing and reloading page).

Hurde · May 16, 2020, 6:00pm

Thank you, I used your solution and now it works perfectly!

As picture-elements requires a image background, it took some time to find a suitable sized transparent image. In the end, I used a self-hosted 25x1 transparent image. If it was wider, the height of the card would become too small and it would cut out. If it was too narrow, the card height would become too big.

My config is starting to become confusing, as my card layers are the following. Let’s hope that I don’t need to go a lot deeper

vertical-stack
	conditional
		picture-elements (for "badge")
	layout-card
		other cards (my main UI)

eggman · May 16, 2020, 6:38pm

Lol, I do each thing bit, by bit. Fixing each ‘issue” as I come across it. Sometimes I look at the end result and think, I’ve no idea how I got there!

thomasloven · May 18, 2020, 8:30pm

That’s exactly how all my plugins work too.

dutchdevil83 · June 1, 2020, 2:31pm

Can`t get scrollbar go away on the side? Can someone put me in the right direction to hide it or to get the max height from a device and only show scrollbar on mobile devices?

Tried different setups with different grid settings but scrollbar stays whatever i try:

Part of the lovelace YAML (configured ‘ha-card{ max height: 100%}’ in my template config of climate card):

  cards:
      - type: custom:layout-card
        layout: vertical
        column_width: 100%
        cards:
          - type: custom:layout-card
            layout: grid
            gridcols: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr
            gridrows: 1fr 1fr 1fr 1fr 1fr
            justify-content: space-evenly
            cards:
            # - type: custom:mini-media-player
              - type: custom:hui-element
                gridrow: 1 / 4
                gridcol: 1 
                card_type: markdown
                style: |
                  ha-card {
                    margin: 0.5rem 0.5rem !important;
                    border-radius: 5px !important;
                    background: linear-gradient(145deg, rgba(62, 71, 83, 0), rgba(42, 53, 74, 1)) !important;
                    box-shadow: none !important;
                    padding: 0.5rem 0.5rem !important;
                    height: 100%;
                    font-family: AvenirNext !important;
                    }
                content: >
                    The lights that are on are:
                    {% set state = 'on' %}
                    {{ expand(states.light, states.switch) | selectattr('state','eq', state) | map(attribute='entity_id') | list | join(', ') }}
              - type: custom:decluttering-card
                gridrow: 1
                gridcol: 2
                template: template_horseshoe_climate
                variables:
                  - name: Buiten
                  - entity_temperature:  sensor.denbosch_temperature
                  - entity_humidity:  sensor.denbosch_humidity
                  - entity_pressure: sensor.denbosch_pressure
              - type: custom:decluttering-card
                gridrow: 2
                gridcol: 3
                template: template_horseshoe_climate
                variables:
                  - name: overkapping
                  - entity_temperature: sensor.temperatuur_overkapping_temperatuur
                  - entity_humidity: sensor.temperatuur_overkapping_luchtvochtigheid
                  - entity_pressure: sensor.temperatuur_overkapping_druk
              - type: custom:decluttering-card
                gridrow: 3
                gridcol: 4
                template: template_horseshoe_climate
                variables:
                  - name: koelkast
                  - entity_temperature: sensor.temperatuur_koelkast_temperatuur
                  - entity_humidity: sensor.temperatuur_koelkast_luchtvochtigheid
                  - entity_pressure: sensor.temperatuur_koelkast_druk
              - type: custom:decluttering-card
                gridrow: 3
                gridcol: 5
                template: template_horseshoe_climate
                variables:
                  - name: badkamer
                  - entity_temperature: sensor.temperatuur_badkamer_temperatuur
                  - entity_humidity: sensor.temperatuur_badkamer_luchtvochtigheid
                  - entity_pressure: sensor.temperatuur_badkamer_druk
              - type: custom:decluttering-card
                gridrow: 1
                gridcol: 3
                template: template_horseshoe_climate
                variables:
                  - name: slaapkamer
                  - entity_temperature: sensor.temperatuur_slaapkamer_temperatuur
                  - entity_humidity: sensor.temperatuur_slaapkamer_luchtvochtigheid
                  - entity_pressure: sensor.temperatuur_slaapkamer_druk
              - type: custom:decluttering-card
                gridrow: 1
                gridcol: 4
                template: template_horseshoe_climate
                variables:
                  - name: zolder
                  - entity_temperature: sensor.temperatuur_zolder_temperatuur
                  - entity_humidity: sensor.temperatuur_zolder_luchtvochtigheid
                  - entity_pressure: sensor.temperatuur_zolder_druk

NDCallahan · June 2, 2020, 1:31am

Hi there. I am having an issue on some devices where the below happens. What could be causing this…