Home Assistant Community

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

#1

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?

#2

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.

#3

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

#4

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

#5

2 vertical stacks inside a horizontal stack?

#6

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

#7

With panel:true?

#8

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

#9

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

Card-modder can be used to fix the problem.

1 Like
#10

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 :frowning: 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

#11

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

#12

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.

#13

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?

#14

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.

#15

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.

#16

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.

#17

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?

#18

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.

#19

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.

#20

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