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

azel_inc · May 17, 2019, 3:03am

I did. i m using GUI, so i include the resources the “GUI” method, which clicking the 3 dots when opening the GUI.

THen i proceed with the code after using “toggle editor”

  - title: Horizontal
    panel: true
    cards:
      - type: custom:layout-card
        layout: horizontal
        cards:
          - type: entities
            entity: binary_sensor.door_window_sensor_158d0001f3a162
          - type: entities
            entity: binary_sensor.door_window_sensor_158d0001f3a162

This is what i uses to see whether it works or not.
This is the error i m getting.

No card type found
[
  {
    "title": "Horizontal",
    "panel": true,
    "cards": [
      {
        "type": "custom:layout-card",
        "layout": "horizontal",
        "cards": [
          {
            "type": "entities",
            "entity": "binary_sensor.door_window_sensor_158d0001f3a162"
          },
          {
            "type": "entities",
            "entity": "binary_sensor.door_window_sensor_158d0001f3a162"
          }
        ]
      }
    ]
  }
]

petro · May 17, 2019, 3:06am

Your top card is missing a card type, unless that is the view

azel_inc · May 17, 2019, 3:12am

I dont think i follow you here. Tbh, i m pretty new at this thing. Lol
I would think that the card type is the custom:layout-card.
then, my two entities card (in this example, same cards) are the one being stacked horizontally?

petro · May 17, 2019, 3:14am

Is that your entire configuration?

azel_inc · May 17, 2019, 3:16am

Yes, that is all. i m assuming that it is no different with how i would write for simple entities type card?

petro · May 17, 2019, 3:18am

try this:

  - title: Horizontal
    panel: true
    cards:
      - type: custom:layout-card
        layout: horizontal
        cards:
          - type: entities
            entities:
              - binary_sensor.door_window_sensor_158d0001f3a162
          - type: entities
            entities:
              - binary_sensor.door_window_sensor_158d0001f3a162

azel_inc · May 17, 2019, 3:22am

I tried that actually. but, anyway tried that again n still wont work.
Still got this;

No card type found
[
  {
    "title": "Horizontal",
    "panel": true,
    "cards": [
      {
        "type": "custom:layout-card",
        "layout": "horizontal",
        "cards": [
          {
            "type": "entities",
            "entities": [
              "binary_sensor.door_window_sensor_158d0001f3a162"
            ]
          },
          {
            "type": "entities",
            "entities": [
              "binary_sensor.door_window_sensor_158d0001f3a162"
            ]
          }
        ]
      }
    ]
  }
]

petro · May 17, 2019, 3:23am

So where is your resource located and what string did you put in to the resource section? (layout-card)

azel_inc · May 17, 2019, 3:30am

I put in raw config editor…which is using GUI (three dots)
the .js file is at /config/www/plugins

initially, i use below (which is copied directly from the guide;

resources:
  - type: js
    url: /local/plugins/card-modder.js?v=1

THen i tried changing to below, thinking i might have different location of the file.

resources:
  - type: js
    url: /local/www/plugins/card-modder.js?v=1

update: i have tried renaming the resources to

resources:
  - type: js
  url: /local/www/plugins/card-tools.js?v=1

because apparently the js file name is card-tool.js… i cant figure out the ?v=1 is needed or not, but i tried putting both with and without, n result is still the same… i m at dead end now… anyway, thanks for the helps so far!

petro · May 17, 2019, 12:02pm

resources:
  - type: js
    url: /local/plugins/card-modder.js?v=1

is correct. but the card you are installing in the layout-card no? So the js file should be the contents of the layout-card and it should be named layout-card.js

azel_inc · May 23, 2019, 10:02am

again, i dont think i can understand you…i might have to give up trying this now…haha…

when i look at it again, i m a little bit confused now…got mixed up with card-tools.js and card-layout.js

i just realised that what i done is actually installed card-tools.js …only this…
because when i refer to this link https://github.com/thomasloven/lovelace-layout-card
first thing it says is to install card-tools.s by following this instruction here https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins

that link let me install card-tools.js only. i m lost what should i done after that…because after that, it only says “If you are using custom updater”, which i m not sure i do.

petro · May 23, 2019, 12:48pm

layout-card just requires card-tools. You are over complicating this. Install card-tools, then install layout-card.

kajmaj · September 30, 2020, 11:00am

I would like to reactivate this older tread with a question:
Is it possible to arrange cards on the page in the following way?

petro · September 30, 2020, 1:49pm

You can with the custom layout-card, but it won’t be easy and it will look terrible on mobile.

kajmaj · September 30, 2020, 3:58pm

Would you be so kind to point me to the right direction?
I need it for wall panel (tablet) homescreen, with layout 8 columns and 5 rows. so I do not care mobile.
I tried some options with custom layout-card w/o success.
It seems that I cannot adjust width/height of particular cards.