Stacking 2 colums fail

MDLefevere · March 1, 2020, 11:18am

Okay. So i really really really don’t get it…

I’m trying to vertical stack 2 collums because they aren’t the same size. But i just can’t figure it out.
If i look at my code. It looks really different from others and somehow it looks like it’s working from the bottom and going up

My code is:

    cards:
      - cards:
          - color: 'rgba(155, 155, 155, 0.25)'
            color_type: label-card
            name: Woonkamer
            type: 'custom:button-card'
          - cards:
              - color_type: card
                entity: light.woonkamer
                name: Woonkamer
                state:
                  - color: 'rgba(255, 178, 171, 0.75)'
                    icon: 'mdi:lightbulb-group-off-outline'
                    value: 'on'
                  - color: 'rgba(155, 155, 155, 0.25)'
                    icon: 'mdi:lightbulb-group-outline'
                    value: 'off'
                type: 'custom:button-card'
              - color_type: card
                entity: light.staande_lamp
                name: Bank
                state:
                  - color: 'rgba(255, 178, 171, 0.75)'
                    icon: 'mdi:lightbulb-off-outline'
                    value: 'on'
                  - color: 'rgba(155, 155, 155, 0.25)'
                    icon: 'mdi:floor-lamp'
                    value: 'off'
                type: 'custom:button-card'
              - color_type: card
                entity: light.dressoir_lamp
                name: Dressoir
                state:
                  - color: 'rgba(255, 178, 171, 0.75)'
                    icon: 'mdi:lightbulb-off-outline'
                    value: 'on'
                  - color: 'rgba(155, 155, 155, 0.25)'
                    icon: 'mdi:lamp'
                    value: 'off'
                type: 'custom:button-card'
              - color_type: card
                entity: light.playbars
                name: Playbars
                state:
                  - color: 'rgba(255, 178, 171, 0.75)'
                    icon: 'mdi:lightbulb-multiple-off-outline'
                    value: 'on'
                  - color: 'rgba(155, 155, 155, 0.25)'
                    icon: 'mdi:led-strip-variant'
                    value: 'off'
                type: 'custom:button-card'
            type: horizontal-stack
        type: vertical-stack
      - cards:
          - color: 'rgba(155, 155, 155, 0.25)'
            color_type: label-card
            name: Overige Lampen
            type: 'custom:button-card'
          - cards:
              - color_type: card
                entity: light.shelly_keuken_dimmer
                name: Keuken (sensor)
                state:
                  - color: 'rgba(255, 178, 171, 0.75)'
                    icon: 'mdi:lightbulb-group-off-outline'
                    value: 'on'
                  - color: 'rgba(155, 155, 155, 0.25)'
                    icon: 'mdi:track-light'
                    value: 'off'
                type: 'custom:button-card'
              - color_type: card
                entity: light.shelly_eettafel_dimmer
                name: Eettafel
                state:
                  - color: 'rgba(255, 178, 171, 0.75)'
                    icon: 'mdi:lightbulb-group-off-outline'
                    value: 'on'
                  - color: 'rgba(155, 155, 155, 0.25)'
                    icon: 'mdi:track-light'
                    value: 'off'
                type: 'custom:button-card'
              - color_type: card
                entity: light.plafondlamp
                name: Plafondlamp
                state:
                  - color: 'rgba(255, 178, 171, 0.75)'
                    icon: 'mdi:lightbulb-off-outline'
                    value: 'on'
                  - color: 'rgba(155, 155, 155, 0.25)'
                    icon: 'mdi:ceiling-light'
                    value: 'off'
                type: 'custom:button-card'
            type: horizontal-stack
        type: vertical-stack

But if i look at some examples i see:

cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
          - type: gauge
      - type: type: custom:weather-card

Doesn’t look the same to me…
Who can help me with the right peace of code . Its kinda frustrating!

Burningstone · March 1, 2020, 1:04pm

Your code is very hard to read you should change it to the format in your last example. Keep the config for one card together and then start with the config for the underlying cards. As you have it know it’s hard to find out what belongs to which card.

MDLefevere · March 1, 2020, 1:19pm

Hmm. Wil try that this afternoon.

But strange enough… This is what Home Assistant makes of it. I just dropped card on a page and this is the output

Burningstone · March 1, 2020, 2:54pm

Yeah, the auto generated code is always confusing, same for the automation editor.

MDLefevere · March 1, 2020, 3:02pm

Kinda

So i sorted it out, and indeed it looks much better.

type: vertical-stack
cards:
  - type: 'custom:button-card'
    name: woonkamer
    color_type: label-card
    color: 'rgba(155, 155, 155, 0.25)'
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: light.woonkamer
        name: Woonkamer
        color_type: card
        state:
          - color: 'rgba(255, 178, 171, 0.75)'
            icon: 'mdi:lightbulb-group-off-outline'
            value: 'on'
          - color: 'rgba(155, 155, 155, 0.25)'
            icon: 'mdi:lightbulb-group-outline'
            value: 'off'
      - type: 'custom:button-card'
        entity: light.staande_lamp
        name: Bank
        color_type: card
        state:
          - color: 'rgba(255, 178, 171, 0.75)'
            icon: 'mdi:lightbulb-off-outline'
            value: 'on'
          - color: 'rgba(155, 155, 155, 0.25)'
            icon: 'mdi:mdi:floor-lamp'
            value: 'off'
      - type: 'custom:button-card'
        entity: light.dressoir_lamp
        name: Dressoir
        color_type: card
        state:
          - color: 'rgba(255, 178, 171, 0.75)'
            icon: 'mdi:lightbulb-off-outline'
            value: 'on'
          - color: 'rgba(155, 155, 155, 0.25)'
            icon: 'mdi:lamp'
            value: 'off'
      - type: 'custom:button-card'
        entity: light.playbars
        name: Televisie
        color_type: card
        state:
          - color: 'rgba(255, 178, 171, 0.75)'
            icon: 'mdi:lightbulb-multiple-off-outline'
            value: 'on'
          - color: 'rgba(155, 155, 155, 0.25)'
            icon: 'mdi:led-strip-variant'
            value: 'off'

But how can i combine two of these into one vertical stack?. Cause if i edit it in the raw editor it gets on big mess with all kinds of errors

MDLefevere · March 1, 2020, 3:08pm

Something like this:

type: vertical-stack
cards:
  - type: vertical-stack
	cards:
	  - type: 'custom:button-card'
		name: woonkamer
		color_type: label-card
		color: 'rgba(155, 155, 155, 0.25)'
	  - type: horizontal-stack
		cards:
		  - type: 'custom:button-card'
			entity: light.woonkamer
			name: Woonkamer
			color_type: card
			state:
			  - color: 'rgba(255, 178, 171, 0.75)'
				icon: 'mdi:lightbulb-group-off-outline'
				value: 'on'
			  - color: 'rgba(155, 155, 155, 0.25)'
				icon: 'mdi:lightbulb-group-outline'
				value: 'off'
		  - type: 'custom:button-card'
			entity: light.staande_lamp
			name: Bank
			color_type: card
			state:
			  - color: 'rgba(255, 178, 171, 0.75)'
				icon: 'mdi:lightbulb-off-outline'
				value: 'on'
			  - color: 'rgba(155, 155, 155, 0.25)'
				icon: 'mdi:mdi:floor-lamp'
				value: 'off'
		  - type: 'custom:button-card'
			entity: light.dressoir_lamp
			name: Dressoir
			color_type: card
			state:
			  - color: 'rgba(255, 178, 171, 0.75)'
				icon: 'mdi:lightbulb-off-outline'
				value: 'on'
			  - color: 'rgba(155, 155, 155, 0.25)'
				icon: 'mdi:lamp'
				value: 'off'
		  - type: 'custom:button-card'
			entity: light.playbars
			name: Televisie
			color_type: card
			state:
			  - color: 'rgba(255, 178, 171, 0.75)'
				icon: 'mdi:lightbulb-multiple-off-outline'
				value: 'on'
			  - color: 'rgba(155, 155, 155, 0.25)'
				icon: 'mdi:led-strip-variant'
				value: 'off'

  - type: vertical-stack
	cards:
	  - type: 'custom:button-card'
		name: Overige lampen
		color_type: label-card
		color: 'rgba(155, 155, 155, 0.25)'
	  - type: horizontal-stack
		cards:
		  - type: 'custom:button-card'
			entity: light.shelly_keuken_dimmer
			name: Keuken (sensor)
			color_type: card
			state:
			  - color: 'rgba(255, 178, 171, 0.75)'
				icon: 'mdi:lightbulb-off-outline'
				value: 'on'
			  - color: 'rgba(155, 155, 155, 0.25)'
				icon: 'mdi:track-light'
				value: 'off'
		  - type: 'custom:button-card'
			entity: light.shelly_eettafel_dimmer
			name: Eettafel
			color_type: card
			state:
			  - color: 'rgba(255, 178, 171, 0.75)'
				icon: 'mdi:lightbulb-off-outline'
				value: 'on'
			  - color: 'rgba(155, 155, 155, 0.25)'
				icon: 'mdi:track-light'
				value: 'off'
		  - type: 'custom:button-card'
			entity: light.plafondlamp
			name: Plafondlamp
			color_type: card
			state:
			  - color: 'rgba(255, 178, 171, 0.75)'
				icon: 'mdi:lightbulb-off-outline'
				value: 'on'
			  - color: 'rgba(155, 155, 155, 0.25)'
				icon: 'mdi:ceiling-light'
				value: 'off'

But when i put this in a manual card all tabs are shifted. I use Notepad++

MDLefevere · March 1, 2020, 3:34pm

Alright. So i got i working . Notepad++ been messing around with TABS. After replacing each tab with 4 spaces it works.

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: 'custom:button-card'
        name: woonkamer
        color_type: label-card
        color: 'rgba(155, 155, 155, 0.25)'
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            entity: light.woonkamer
            name: Woonkamer
            color_type: card
            state:
              - color: 'rgba(255, 178, 171, 0.75)'
                icon: 'mdi:lightbulb-group-off-outline'
                value: 'on'
              - color: 'rgba(155, 155, 155, 0.25)'
                icon: 'mdi:lightbulb-group-outline'
                value: 'off'
          - type: 'custom:button-card'
            entity: light.staande_lamp
            name: Bank
            color_type: card
            state:
              - color: 'rgba(255, 178, 171, 0.75)'
                icon: 'mdi:lightbulb-off-outline'
                value: 'on'
          - color: 'rgba(155, 155, 155, 0.25)'
                    icon: 'mdi:mdi:floor-lamp'
                value: 'off'
          - type: 'custom:button-card'
            entity: light.dressoir_lamp
            name: Dressoir
            color_type: card
            state:
              - color: 'rgba(255, 178, 171, 0.75)'
                icon: 'mdi:lightbulb-off-outline'
                value: 'on'
              - color: 'rgba(155, 155, 155, 0.25)'
                icon: 'mdi:lamp'
                value: 'off'
          - type: 'custom:button-card'
            entity: light.playbars
            name: Televisie
            color_type: card
            state:
              - color: 'rgba(255, 178, 171, 0.75)'
                icon: 'mdi:lightbulb-multiple-off-outline'
                value: 'on'
              - color: 'rgba(155, 155, 155, 0.25)'
                icon: 'mdi:led-strip-variant'
                value: 'off'

  - type: vertical-stack
    cards:
      - type: 'custom:button-card'
        name: Overige lampen
        color_type: label-card
        color: 'rgba(155, 155, 155, 0.25)'
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            entity: light.shelly_keuken_dimmer
            name: Keuken (sensor)
            color_type: card
            state:
              - color: 'rgba(255, 178, 171, 0.75)'
                icon: 'mdi:lightbulb-off-outline'
                value: 'on'
              - color: 'rgba(155, 155, 155, 0.25)'
                icon: 'mdi:track-light'
                value: 'off'
          - type: 'custom:button-card'
            entity: light.shelly_eettafel_dimmer
            name: Eettafel
            color_type: card
            state:
              - color: 'rgba(255, 178, 171, 0.75)'
                icon: 'mdi:lightbulb-off-outline'
                value: 'on'
              - color: 'rgba(155, 155, 155, 0.25)'
                icon: 'mdi:track-light'
                value: 'off'
          - type: 'custom:button-card'
            entity: light.plafondlamp
            name: Plafondlamp
            color_type: card
            state:
              - color: 'rgba(255, 178, 171, 0.75)'
                icon: 'mdi:lightbulb-off-outline'
                value: 'on'
              - color: 'rgba(155, 155, 155, 0.25)'
                icon: 'mdi:ceiling-light'
                value: 'off'

But is there a way to widen a card?. It’s kinda small, but LoveLace somehow forces it into a thirds of the screen.

Burningstone · March 2, 2020, 8:07am

Can you show a picture how it looks like now and a sketch how you want it to look? I can recommend using Visual Studio Code as an editor for your HA files, it even has an extension to auto complete entities from HA etc.