Lovelace: Arranging cards side-by-side instead of over-under

pandaym · February 17, 2019, 10:32pm

Hi guys,

For the life of me, I cannot get these two cards to go side-by-side. Been messing with the horizontal stack and panel options, but nothing seems to go my way.

Any ideas?

petro · February 17, 2019, 10:55pm

You must have a vertical stack as the top most card in that view. They naturally spread out side by side if the screen has enough horizontal space.

dwinnn · February 17, 2019, 11:38pm

Try using @thomasloven Layout card. It may be more intuitive for you to use than vertical and horizontal stack cards.

tom_l · February 17, 2019, 11:40pm

I noticed that for panels with two or possibly three small cards this does not happen. They stack vertically.

DavidFW1960 · February 18, 2019, 9:14am

2 vertical stacks inside a horizontal stack?

pandaym · February 18, 2019, 9:52am

That puts them on top of each other, but makes them tiny. My iframe gets really tiny with scroll bars.

DavidFW1960 · February 18, 2019, 10:27am

With panel:true?

petro · February 18, 2019, 12:53pm

That may be the case. There may be a vertical threshold that needs to pass before it spreads out horizontally

thomasloven · February 18, 2019, 3:50pm

Here’s how it works: https://github.com/thomasloven/lovelace-card-modder#forcing-size

Card-modder can be used to fix the problem.

pandaym · February 18, 2019, 8:38pm

Cannot figure it out unfortunately. It might just be me, but it seems to me there is no logic in how any of this functions. I cannot even find installation instructions for the lovelace-layout-card It just goes straight to the point of using it. Might be obvious for some, but to me, it is way above what I can figure out myself. https://github.com/thomasloven/lovelace-layout-card

DavidFW1960 · February 18, 2019, 9:14pm

Here’s one of mine…

  - title: Buses, Trains & Fuel
    icon: mdi:train
    cards:
      - type: 'custom:compact-custom-header'
      - type: vertical-stack
        cards:
          - type: entities
            title: Transport
            show_header_toggle: false
            entities:
              - sensor.busmonitor1
              - sensor.busmonitor2
              - sensor.trainmonitor1
              - sensor.trainmonitor2
          - type: entities
            title: NSW Fuel Watch - Sydney
            show_header_toggle: false
            entities:
              - sensor.caltex_woolworths_waitara_pdl
              - sensor.caltex_woolworths_turramurra_pdl
              - sensor.caltex_st_ives_pdl
              - sensor.caltex_st_ives_north_pdl
              - sensor.caltex_woolworths_glenrose_pdl
              - sensor.caltex_belrose_pdl
      - type: entities
        title: NSW Fuel Watch - Central Coast
        show_header_toggle: false
        entities:
          - sensor.caltex_kariong_pdl
          - sensor.caltex_woolworths_pdl
          - sensor.caltex_gosford_west_pdl
          - sensor.caltex_gosford_west_pdl_2
          - sensor.caltex_gosford_west_pdl_3
          - sensor.caltex_woolworths_erina_pdl
          - sensor.caltex_wyoming_pdl
          - sensor.caltex_woolworths_tuggerah_pdl
          - sensor.caltex_woolworths_tuggerah_north_pdl
          - sensor.caltex_wyong_pdl
          - sensor.caltex_wyong_pdl_2
          - sensor.coles_express_kariong_dl

petro · February 22, 2019, 1:53pm

This is open source, many custom things will come with trial and error.

To install any custom card, you just need to follow the link provided in just about all @thomasloven’s custom cards.

pandaym · February 22, 2019, 2:22pm

Might just be me. But that instruction tells me to look in the documentation for whether it is a js or module - but the layout card does not say what it is?

PlayedIn · February 22, 2019, 2:27pm

You need to use card-modder on the first card. In card-modder, set the report_size on the first card to a large enough number so that the second card doesn’t think there’s enough space under the first card and as a result will appear on the side.

petro · February 22, 2019, 2:29pm

Look, You actually have to read the directions… I’m sorry for being a dick but it’s literally spelled out for you. It’s just using a different card as an example.

The difference is that you need to install all the prereqs. I.E. You have to follow the process with the card in the link.

You don’t need the card modder, you need the card-tools.

PlayedIn · February 22, 2019, 2:39pm

I’m not sure what you mean by that. Card-modder which requires card-tools works well to fix this problem and is what @thomasloven suggested above.

petro · February 22, 2019, 3:27pm

The lovelace-layout-card only requires card-tools

Your problem is witht he layout on the page… which means you need the layout-card, not the card modder.

EDIT: I guess the confusion comes from the fact that you were talking about he layout card, which is not the same as the card-modder card.

So what solution do you want to use? The card-modder solution or the layout-card solution?

thomasloven · February 24, 2019, 7:49pm

That is correct. An oversight from my part, and for that I am sorry.

All my cards and plugins are meant to be loaded as js and not module.
I’ll be sure to make this clear in all readmes over the next few days.

azel_inc · May 16, 2019, 4:43am

i tried using the instruction to install the card-layout, but am getting error “no card type found”.
i m guessing i didnt manage to get the card-layout installed properly. any idea?

how i install it is; copy the .js file from github, put in in config/www/plugins/ folder.
then restart, after that i go to ui editor and start putting in

- type: custom:layout-card

in the ui editor.

petro · May 16, 2019, 11:39am

did you add the card into the yaml file as it explains in step 3? Did you add the required resource?