Cards layout

Sildenafil · May 9, 2020, 5:20pm

Hi,
Without changing anything in the configuration file, I found some pages like this: the cards are arranged one under the other while before they adapted to the screen

title: Piante
icon: mdi:flower
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.bonsai        
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_ficus_acqua
        name: Acqua BONSAI
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 20
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 60
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_ficus_fertilita
            name: Concime Bonsai              
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_ficus_luminosita
            name: Luce Bonsai        
            max: 35000
            target: 1500
            severity:
              - color: Red
                from: 0
                to: 1500
              - color: Green
                from: 1501
                to: 30000
              - color: Red
                from: 30001
                to: 35000
##############
# ROSMARINO
#############
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.rosmarino     
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_rosmarino_acqua
        name: Acqua ROSMARINO
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 15
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 60
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_rosmarino_fertilita
            name: Concime Rosmarino              
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_rosmarino_luminosita
            name: Luce Rosmarino        
            max: 35000
            target: 2500
            severity:
              - color: Red
                from: 0
                to: 2500
              - color: Green
                from: 2501
                to: 30000
              - color: Red
                from: 30001
                to: 35000
##############
# BASILICO
#############
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.basilico         
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_basilico_acqua
        name: Acqua BASILICO
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 15
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 60
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_basilico_fertilita
            name: Concime Basilico              
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_basilico_luminosita
            name: Luce Basilico       
            max: 35000
            target: 2500
            severity:
              - color: Red
                from: 0
                to: 2500
              - color: Green
                from: 2501
                to: 30000
              - color: Red
                from: 30001
                to: 35000
#########################
#   ORCHIDEE
#####################
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.orchidee        
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_orchidee_acqua
        name: Acqua ORCHIDEE
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 15
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 65
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_orchidee_fertilita
            name: Concime Orchidee              
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_orchidee_luminosita
            name: Luce Orchidee       
            max: 35000
            target: 1500
            severity:
              - color: Red
                from: 0
                to: 1500
              - color: Green
                from: 1501
                to: 30000
              - color: Red
                from: 30001
                to: 35000              
#########################
#   AGAPANTHS SX
#####################
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.agapanthus_sx        
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_agapanthus_sx_acqua
        name: Acqua AGAPANTHUS SX
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 15
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 60
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_agapanthus_sx_fertilita
            name: Concime Agapanthus sx             
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_agapanthus_sx_luminosita
            name: Luce Agapanthus sx      
            max: 35000
            target: 1500
            severity:
              - color: Red
                from: 0
                to: 1500
              - color: Green
                from: 1501
                to: 30000
              - color: Red
                from: 30001
                to: 35000      
#########################
#   AGAPANTHS DX
#####################
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.agapanthus_dx        
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_agapanthus_dx_acqua
        name: Acqua AGAPANTHUS DX
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 15
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 60
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_agapanthus_dx_fertilita
            name: Concime Agapanthus dx             
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_agapanthus_dx_luminosita
            name: Luce Agapanthus dx      
            max: 35000
            target: 1500
            severity:
              - color: Red
                from: 0
                to: 1500
              - color: Green
                from: 1501
                to: 30000
              - color: Red
                from: 30001
                to: 35000
#########################
#   CIPRESSO SX
#####################
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.cipresso_sx        
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_cipresso_sx_acqua
        name: Acqua CIPRESSO SX
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 15
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 60
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_cipresso_sx_fertilita
            name: Concime Cipresso sx            
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_cipresso_sx_luminosita
            name: Luce Cipresso sx     
            max: 35000
            target: 1500
            severity:
              - color: Red
                from: 0
                to: 1500
              - color: Green
                from: 1501
                to: 30000
              - color: Red
                from: 30001
                to: 35000
#########################
#   CIPRESSO SX
#####################
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.cipresso_dx        
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_cipresso_dx_acqua
        name: Acqua CIPRESSO DX
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 15
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 60
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_cipresso_dx_fertilita
            name: Concime Cipresso dx            
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_cipresso_dx_luminosita
            name: Luce Cipresso dx     
            max: 35000
            target: 1500
            severity:
              - color: Red
                from: 0
                to: 1500
              - color: Green
                from: 1501
                to: 30000
              - color: Red
                from: 30001
                to: 35000
#########################
#   CALLA
#####################
  - type: custom:vertical-stack-in-card
    cards:
      - type: plant-status
        entity: plant.calla           
      - type: custom:mini-graph-card
        entities:
          - sensor.xiaomi_zantedeschia_acqua
        name: Acqua CALLA
        animate: true
        show:
          labels: true
        color_thresholds:
          - value: 0
            color: "#f90000"
            #rosso
          - value: 15
            color: "#f97c00"
            #arancione
          - value: 30
            color: "#00f90c"
            #verde
          - value: 55
            color: "#00f4ec"
            #ciano
          - value: 60
            color: "#0021f9"
            #blu
      - type: 'custom:bar-card'       
        height: 30px
        positions:
          title: inside
        entities:  
          - entity: sensor.xiaomi_zantedeschia_fertilita
            name: Concime Calla            
            max: 2500
            target: 350              
            severity:
              - color: Red
                from: 0
                to: 350
              - color: Orange
                from: 351
                to: 450
              - color: Green
                from: 451
                to: 2500
              - color: Blue
                from: 2501
                to: 10000  
          - entity: sensor.xiaomi_zantedeschia_luminosita
            name: Luce Calla     
            max: 35000
            target: 1500
            severity:
              - color: Red
                from: 0
                to: 1500
              - color: Green
                from: 1501
                to: 30000
              - color: Red
                from: 30001
                to: 35000

petro · May 9, 2020, 5:26pm

What are you asking?

Sildenafil · May 9, 2020, 5:40pm

Why the cards are not arranged next to each other even if there is space

petro · May 9, 2020, 5:45pm

Are both screenshots using the same configuration? If yes…
What browser are you using in the second screenshot?

Sildenafil · May 9, 2020, 5:58pm

Same configuration, the first screen is of some update ago.
I use Chrome, but I have the same result on firefox and explorer

petro · May 9, 2020, 6:01pm

They should be side by side. Try clearing your cache and reloading the page. CTRL+F5. Also, verify that you aren’t getting any errors in the logs.

mirekmal · May 9, 2020, 8:06pm

From what I understand reading across many posts this is result of changes introduced in 0.107 causing custom stack cards not to work properly (not being able to properly calculate its dimentions, or so). No sultion, until you use lovelace layout card or developers update the code their stack cards…

Sildenafil · May 10, 2020, 1:43pm

ok, the problem is the custom vertical stack in card. I come back to version 0.2.1 and the problem is gone