search

thomasloven / lovelace-popup-card

94 stars 14 forks source link

Popup card have problem in horizontal-stack #6

Closed clementchik0308 closed 5 years ago

clementchik0308 commented 5 years ago

Hello, found display problem in horizontal-stack, please comment.

image

PeteCondliffe commented 5 years ago

Works fine for me but I am using card-modder. Not sure if that makes any difference. Maybe post your code so people have a chance of reproducing the issue.

capture


  - type: custom:popup-card
    entity: fan.bedroom
    title: Fan
    card:
      type: vertical-stack
      cards:

      ## Fan On/Off
        - type: custom:card-modder
          style: !include /config/lovelace/styles/default.yaml
          card:
            type: custom:button-card
            entity: fan.bedroom
            icon: mdi:fan
            show_state: true
            size: 100px

        - type: horizontal-stack
          cards:      
        ## Fan Speed 1
          - type: custom:card-modder
            style: !include /config/lovelace/styles/default.yaml
            card:
              type: custom:button-card
              icon: mdi:numeric-1-box
              entity: input_select.bedroom_fan_speed
              action: service
              service:
                domain: input_select
                action: select_option
                data:
                  entity_id: input_select.bedroom_fan_speed
                  option: '1'
              state:
                - value: '1'
                  color: --primary-text-color
              size: 50px

        ## Fan Speed 2
          - type: custom:card-modder
            style: !include /config/lovelace/styles/default.yaml
            card:
              type: custom:button-card
              icon: mdi:numeric-2-box
              entity: input_select.bedroom_fan_speed
              action: service
              service:
                domain: input_select
                action: select_option
                data:
                  entity_id: input_select.bedroom_fan_speed
                  option: '2'
              state:
                - value: '2'
                  color: --primary-text-color
              size: 50px

        - type: horizontal-stack
          cards:

        ## Fan Speed 3
          - type: custom:card-modder
            style: !include /config/lovelace/styles/default.yaml
            card:
              type: custom:button-card
              icon: mdi:numeric-3-box
              entity: input_select.bedroom_fan_speed
              action: service
              service:
                domain: input_select
                action: select_option
                data:
                  entity_id: input_select.bedroom_fan_speed
                  option: '3'
              state:
                - value: '3'
                  color: --primary-text-color
              size: 50px

        ## Fan Speed 4
          - type: custom:card-modder
            style: !include /config/lovelace/styles/default.yaml
            card:
              type: custom:button-card
              icon: mdi:numeric-4-box
              entity: input_select.bedroom_fan_speed
              action: service
              service:
                domain: input_select
                action: select_option
                data:
                  entity_id: input_select.bedroom_fan_speed
                  option: '4'
              state:
                - value: '4'
                  color: --primary-text-color
              size: 50px

        - type: horizontal-stack
          cards: 

        ## Fan Speed 5
          - type: custom:card-modder
            style: !include /config/lovelace/styles/default.yaml
            card:
              type: custom:button-card
              icon: mdi:numeric-5-box
              entity: input_select.bedroom_fan_speed
              action: service
              service:
                domain: input_select
                action: select_option
                data:
                  entity_id: input_select.bedroom_fan_speed
                  option: '5'
              state:
                - value: '5'
                  color: --primary-text-color
              size: 50px

        ## Fan Speed 6
          - type: custom:card-modder
            style: !include /config/lovelace/styles/default.yaml
            card:
              type: custom:button-card
              icon: mdi:numeric-6-box
              entity: input_select.bedroom_fan_speed
              action: service
              service:
                domain: input_select
                action: select_option
                data:
                  entity_id: input_select.bedroom_fan_speed
                  option: '6'
              state:
                - value: '6'
                  color: --primary-text-color
              size: 50px

        - type: horizontal-stack
          cards: 

        ## Fan Speed 7
          - type: custom:card-modder
            style: !include /config/lovelace/styles/default.yaml
            card:
              type: custom:button-card
              icon: mdi:numeric-7-box
              entity: input_select.bedroom_fan_speed
              action: service
              service:
                domain: input_select
                action: select_option
                data:
                  entity_id: input_select.bedroom_fan_speed
                  option: '7'
              state:
                - value: '7'
                  color: --primary-text-color
              size: 50px

          ## Fan Speed 8
          - type: custom:card-modder
            style: !include /config/lovelace/styles/default.yaml
            card:
              type: custom:button-card
              icon: mdi:numeric-8-box
              entity: input_select.bedroom_fan_speed
              action: service
              service:
                domain: input_select
                action: select_option
                data:
                  entity_id: input_select.bedroom_fan_speed
                  option: '8'
              state:
                - value: '8'
                  color: --primary-text-color
              size: 50px
clementchik0308 commented 5 years ago

Here is the code, its sample. but have space

- title: test
   cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: >
              ### Dining room
      - type: horizontal-stack
        cards:
          - type: custom:popup-card
            entity: fan.dining_room_fan
            title: Dining room fan
            card:
              type: entities
              entities:
                - type: custom:custom-fan-card
                  entity: fan.dining_room_fan
          - type: entity-button
            entity: fan.dining_room_fan    

          - type: entity-button
            entity: light.dining_room_light
            icon: mdi:ceiling-light
            tap_action:
              action: toggle

PeteCondliffe commented 5 years ago

I'm pretty sure the problem is your yaml. Move the custom:popup-card out of your horizontal-stack. I would suggest having it as the first or last card for the view

Everything appears to be out by one space after title but i guess that's the copy & paste that's done that

Also i'm pretty sure with the layout you are after here you want the horizontal-stack nested under the vertical-stack

Untested but here's how I would have your yaml


- title: test
  cards:
    - type: vertical-stack
      cards:
        - type: markdown
          content: >
            ### Dining room
        - type: horizontal-stack
          cards:
            - type: entity-button
              entity: fan.dining_room_fan    
            - type: entity-button
              entity: light.dining_room_light
              icon: mdi:ceiling-light
              tap_action:
                action: toggle    
    - type: custom:popup-card
      entity: fan.dining_room_fan
      title: Dining room fan
      card:
        type: entities
        entities:
          - type: custom:custom-fan-card
            entity: fan.dining_room_fan

Could you post me a link to the custom:custom-fan-card please?

clementchik0308 commented 5 years ago

I'm pretty sure the problem is your yaml. Move the custom:popup-card out of your horizontal-stack. I would suggest having it as the first or last card for the view

Everything appears to be out by one space after title but i guess that's the copy & paste that's done that

Also i'm pretty sure with the layout you are after here you want the horizontal-stack nested under the vertical-stack

Untested but here's how I would have your yaml


- title: test
  cards:
    - type: vertical-stack
      cards:
        - type: markdown
          content: >
            ### Dining room
        - type: horizontal-stack
          cards:
            - type: entity-button
              entity: fan.dining_room_fan    
            - type: entity-button
              entity: light.dining_room_light
              icon: mdi:ceiling-light
              tap_action:
                action: toggle    
    - type: custom:popup-card
      entity: fan.dining_room_fan
      title: Dining room fan
      card:
        type: entities
        entities:
          - type: custom:custom-fan-card
            entity: fan.dining_room_fan

Could you post me a link to the custom:custom-fan-card please?

Thanks a lot, its work.

clementchik0308 commented 5 years ago

Could you post me a link to the custom:custom-fan-card please?

Here is the link https://community.home-assistant.io/t/lovelace-custom-fan-card-example/68318/24