šŸ”¹ Layout-card - Take control of where your cards end up

Share your Projects! Dashboards & Frontend
163

@thomasloven I recently updated Home Assistant from 0.106.x to 0.114.1 and all of the custom components that got an update in the meantime. I posted about this yesterday in the Button Card topic as I first thought it was an issue with that component, but after some testing I found out that the issue is with Layout Card. Only on mobile (iOS), on desktop it works fine.

In a reply to my post from yesterday someone mentioned that something changed in Layout Card around the time of 0.112.0, so I went through the changelog and found out that it had to be release 14 of Layout Card. So, I reinstalled version 13 and got the following result (as expected):

release.13
release.131124Ɨ489 27.4 KB

That is what it looked like before the update. I updated back to release 16 and got this as a result (unexpected):

release.16
release.161124Ɨ502 27.5 KB

Just to make sure it actually changed in release 14, I installed both release 14 and 15 as well. This was kind of unexpected to what Iā€™ve read elsewhere as both release 14 as well as 15 worked perfectly fine.

I didnā€™t change any of my code btw. These are the cards shown in the screenshots on my Lovelace view:

        - type: custom:button-card
          template: heading
          name: {{ _t_i18n.lights.title }}

        - type: custom:mod-card
          style: |
            layout-card {
              padding: 0 10px;
            }
          card:
            type: custom:layout-card
            layout: horizontal
            justify_content: start
            min_columns: 4
            cards:
              {% for light in room.lights %}
              - type: custom:button-card
                template: room_light
                entity: {{ light.entity }}
                icon: {{ light.icon }}
                name: {{ light.name }}
                label: "{{ light.label | default(' ') }}"
                hold_action:
                  !include
                    - ../../popups/light.yaml
                    - entity: {{ light.entity }}
              {% endfor %}
              - type: custom:button-card
                color_type: blank-card
                aspect_ratio: 1/1
              - type: custom:button-card
                color_type: blank-card
                aspect_ratio: 1/1
              - type: custom:button-card
                color_type: blank-card
                aspect_ratio: 1/1

        {% endif %}

This is the room_light Button Card template (not sure whether you would need this), but just in case here it is:

---
room_light:
  size: 25%
  aspect_ratio: 1/1
  show_state: true
  deep_press: true

  tap_action:
    action: toggle
    haptic: light

  styles:
    card:
      - box-shadow: none
      - border-radius: 12px
    grid:
      - grid-template-areas: '"i i" "n n" "s brightness"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    img_cell:
      - justify-content: start
      - align-items: start
    icon:
      - padding: 10px 10px
      - height: 50%
    name:
      - justify-self: start
      - padding: 5px 0 0 10px
      - font-weight: bold
      - font-size: 13px
    label:
      - justify-self: start
      - padding: 0 10px 5px
      - font-size: 11px
    state:
      - justify-self: start
      - padding: 0 10px 5px
      - font-size: 11px
    custom_fields:
      brightness:
        - position: absolute
        - top: 12px
        - right: 12px
        - width: 30%

  state:
    - value: 'unavailable'
      styles:
        card:
          - filter: opacity(50%)

In issues related to Layout Card release 14 on this forum and on your Github issues youā€™ve asked those people to update to release 16. All of those issues seem to have been fixed with that release. For me however it didnā€™t. For me the issue actually started to occur with release 16. All release before that seem to work fine. Do you know how to fix this?

Edit:
Something I posted in the other thread, but not hereā€¦ when I have 2, 3 or 4 columns, the buttons in column 2 and 3 are smaller. The buttons in column 1 and 4 however are the correct size (screenshot with 4 columns can be seen here in the other thread).

165

@thomasloven Hi, I was wondering: is it possible to create a layout card with a max height, where if the content exceeds the height you can continuously scroll to reveal the rest of the content? So basically like swiper card, but vertically with a set max height and continuous scrolling. Trying to build a new user interface where this would be the basis.

166

Iā€™m trying to see if I can use layout card for my light buttons, instead of combing horizontal-stacks withing vertical-stacks. Goal is to include auto-entities later on, to populate my UI with button cards automatically.

However I am having weird issues with sizing. I use the following code:

          - layout: horizontal
            type: 'custom:layout-card'
            column_num: 4 
            column_width: 100%
            cards:            
              - template: light
                entity: light.small_bulb
                name: Raam
                type: 'custom:button-card'
              - MORE BUTTON CARDS 8x DOWN HERE

The layout itself works, but the sides are expanded somehow. Expanding the window a little bit solves this weird behaviour. Tried adding column_width: 100% and even made that smaller. Makes no difference. This is on Chrome/chromium browser and iOS (13.6). On iOS this is kinda bad, since I canā€™t resize windows (nor should I want to). One thing to note: I have this line of code at the base of my view (so I have a little padding all around).

      - layout: vertical
        type: 'custom:layout-card'
        column_width: 96%

I tried chaning that to 100% for now, but solves nothing. Also, this should just work (which shows when Iā€™m slightly expanding the window). This is only with the content inside the layout-card you see in the gif below.

Video of the glitch:

uptaKFNn0a
uptaKFNn0a523Ɨ1149 2.66 MB

Is this a bug or a user error on my end?

Edit: I changed the code to this:

          - layout: horizontal
            type: 'custom:layout-card'
            column_width: 25%
            cards:            
              - template: light
                entity: light.small_bulb
                name: Raam
                type: 'custom:button-card'
              - MORE BUTTON CARDS 8x DOWN HERE

I figured, letā€™s just devide by 4 since I want 4 button cards, so put in 25% column width instead of column_num. This does work. Though I am curious if this is the correct way to use it. I want to avoid issues down the roadā€¦

Edit 2: After further testing this also gives a different issue, kinda like @thmry mentioned. 2 and 3 button cards are slightly smaller than 1 and 4. Also this ONLY occurs when setting the windows to smallest size (which is standard on mobile).

Edit 3: I can confirm this issue is not present with build 14. After that build something has changed with the paddings. I noticed back then (and now again) that I need to set my base layout card to 98% with build 14, while build 16 needs ~96% to achieve the same margins. Could be related to this: https://github.com/thomasloven/lovelace-layout-card/issues/93

I will revert back to horizontal and vertical stacks for now (cause I donā€™t want to use an older build of layout card). I hope this will be fixed soon.

1 Like
167

Itā€™s the exact same issue I have. Itā€™s an issue in the latest release as youā€™ve already noticed. I reverted back to release 15 which works fine.

1 Like
168

Yeah, Iā€™m worried that build 16 added features that build 15 will break because thatā€™s missing. Or that it never gets fully updated and newer builds with more features release. I donā€™t want to rewrite my entire view and revert everything to horizontal/vertical stacks down the road.

If this gets fixed or there is a workaround, Iā€™ll take the plunge and change everything to layout card :slight_smile:

Edit: @thmry I kinda used a workaround to use build 16 with the normal styling of build 15. I figured it was because of the styling in the .js file. I inspected the elements and changed some stuff and could indeed fix the paddings around the left and right card. I couldnā€™t fix the 2nd and 3rd buttons though. I noticed 16 had more styling codes, so I thought maybe that caused it.

So what I figured: why not use the styling codes of build 15 and remove the one of build 16ā€¦ The code of 15 works flawlessly in 16. Kinda hacky method, but it works. Running build 16 now without the glitched view. Maybe doing this is the same as running build 15, but at least I donā€™t see an update in HACS anymore lol.

169

I try to show my Lights Button Cards only if they are ā€œonā€. All works in the Way i want, little bit complicated i think, but this way it works. But one thing i dint understand.

The Position of the Buttons change when a second or more lights go ā€œonā€. Is there a way to set the position fixed?
This is my Config:

          - type: custom:stack-in-card
            style:
              left: 75.0%
              top: 18.0%
              width: 50%
            cards:
                    - type: markdown
                      content: '     '
                    - type: custom:auto-entities
                      show_empty: false
                      filter:
                        include:
                          - entity_id: light.wohnzimmer
                            state: 'on'
                            options:
                                type: custom:button-card
                                entity: light.wohnzimmer
                                name: Wohnen
                                show_icon: false
                                show_state: false
                                custom_fields:
                                  icon_wohnen: >
                                    <svg viewBox="0 0 35.02 31.02">
                                    <path fill="#9da0a2" d="M12.44,15.69v.24c0,.06,0,.11,0,.19.49,0,.92.06,1.05.61h3.56V10.68c0-.33,0-.35.34-.35h3.46c.34,0,.35,0,.35.35v5.88a1.21,1.21,0,0,0,0,.18c.1,0,.2,0,.3,0s.22.09.22.24c0,1.35,0,2.7,0,4.05,0,.35,0,.36-.37.36H21c0,.36-.07.71-.11,1.07l0,.33c0,.34,0,.34-.37.34-.64,0-.53.07-.61-.58,0-.38-.07-.77-.11-1.15H2.46c0,.35-.07.7-.1,1.05,0,.15,0,.31,0,.46s-.09.22-.24.22H1.63c-.17,0-.24-.07-.25-.24,0-.44-.08-.88-.13-1.32a1.68,1.68,0,0,0,0-.18H.84c-.3,0-.32,0-.32-.33V17c0-.26,0-.29.29-.29H1c0-.08,0-.15,0-.21V10.66c0-.3,0-.33.31-.33H4.91c.26,0,.29.05.29.31v5.23c0,.28,0,.56,0,.86H8.73c.29-.52.29-.52,1.07-.63v-.41h-3a.87.87,0,0,1-1-1c0-1.53,0-3.07,0-4.61a.85.85,0,0,1,.89-.91h8.83a.85.85,0,0,1,.91.93v4.66a.85.85,0,0,1-.89.91H12.44Zm-3.74-1c.45,0,.45,0,.72-.22l.89-.84c.09-.09.18-.16.29,0s0,.2-.06.28L10.4,14l-.72.68h6.4V10.18H15.5c-.11,0-.22,0-.23-.16s.11-.18.24-.18h.54c-.09-.25-.19-.31-.49-.31H6.62a.42.42,0,0,0-.44.31h8.23a.69.69,0,0,1,.25,0,.27.27,0,0,1,.13.18s-.08.11-.14.14a.59.59,0,0,1-.19,0H6.17v4.51H8a.5.5,0,0,0,.31-.12C8.9,14,9.46,13.48,10,12.93c.09-.08.19-.15.29,0s0,.21-.05.29l-.57.54C9.38,14,9.06,14.34,8.7,14.67ZM.87,21H5.36V17.09H3.94c0,.08,0,.15,0,.22,0,.29,0,.32-.33.32H2.48c-.25,0-.29,0-.29-.29v-.25H.87Zm20.51,0V17.09H20.07v.33a.19.19,0,0,1-.21.21H18.53a.19.19,0,0,1-.21-.21v-.33H16.89V21ZM5.73,17.09v2.83H7.45v-1.6c0-.29,0-.31.29-.31h6.79c.25,0,.28,0,.28.28,0,.54,0,1.08,0,1.63h1.72V17.09ZM1.39,15.73H4.84v-5H1.39Zm19.46,0V10.68H17.41v5.05Zm-4.32,4.56H5.73V21h10.8Zm-7.76-.37h4.7V18.37H8.77ZM6.18,15a.5.5,0,0,0,.54.32h8.85c.29,0,.42-.08.47-.31Zm11.23,1.69h3.44V16.1H17.41Zm-16,0H4.84V16.1H1.39Zm7.72,0h4a.39.39,0,0,0-.39-.27H9.5A.39.39,0,0,0,9.11,16.73Zm-.69,3.2V18.36H7.8v1.57Zm6-1.57h-.62v1.56h.62Zm-2.37-2.65H10.16v.4h1.93ZM2,22.78l.13-1.37H1.58l.13,1.37ZM20.13,21.4l.14,1.38h.27c0-.37.08-.72.11-1.08,0-.09,0-.19,0-.3ZM2.53,17.29h.91c.15,0,.15,0,.12-.2h-1Zm16.15-.2c-.05.15,0,.2.15.2h.73c.15,0,.21,0,.13-.21h-1ZM1.68,14a1.47,1.47,0,0,1,1.44-1.46,1.45,1.45,0,1,1,0,2.9A1.49,1.49,0,0,1,1.68,14ZM2,14a1.11,1.11,0,1,0,1.1-1.12A1.11,1.11,0,0,0,2,14Zm1.65-2.35a.57.57,0,0,1-.54.54.58.58,0,0,1-.54-.54.57.57,0,0,1,.55-.54A.57.57,0,0,1,3.66,11.64Zm-.3,0c0-.18-.1-.25-.24-.25a.18.18,0,0,0-.2.19c0,.14.07.23.21.21A1,1,0,0,0,3.36,11.69ZM20.58,14a1.49,1.49,0,0,1-1.45,1.46A1.5,1.5,0,0,1,17.68,14a1.45,1.45,0,0,1,2.9,0Zm-.34,0a1.11,1.11,0,1,0-1.13,1.11A1.1,1.1,0,0,0,20.24,14ZM19.13,11.1a.57.57,0,0,1,.54.54.54.54,0,1,1-1.08,0A.57.57,0,0,1,19.13,11.1Zm-.23.6a.79.79,0,0,0,.23.14.18.18,0,0,0,.2-.21.17.17,0,0,0-.2-.19C19,11.44,18.93,11.51,18.9,11.7ZM9.78,18.64c-.13,0-.26,0-.26.18s.14.16.27.16h2.67c.13,0,.26,0,.27-.16s-.15-.18-.28-.18H9.78ZM3.14,13.12a.87.87,0,1,1,0,1.73.87.87,0,0,1,0-1.73ZM2.6,14a.5.5,0,0,0,.53.52.53.53,0,0,0,0-1A.5.5,0,0,0,2.6,14ZM20,14a.86.86,0,1,1-.87-.86A.9.9,0,0,1,20,14Zm-.34,0a.5.5,0,0,0-.52-.53.53.53,0,1,0,0,1A.49.49,0,0,0,19.65,14ZM.33,1c.1,0,.3-.2.6-.2a3.87,3.87,0,0,1,2.6.1c.3.1.4.3.6.4s.1.3-.1.5a2.29,2.29,0,0,1-.5.3,5.24,5.24,0,0,1-2.8-.2l-.6-.3C-.07,1.45-.07,1.25.33,1Zm1.5-1a2.09,2.09,0,0,0-1.7.8A4.79,4.79,0,0,1,4,1,2.17,2.17,0,0,0,1.83,0Zm5.8,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5l-.6.3A4.5,4.5,0,0,1,8,2a2,2,0,0,0-.6-.4C7.23,1.45,7.23,1.25,7.63,1Zm1.5-1a2.09,2.09,0,0,0-1.7.8,5.26,5.26,0,0,1,3.9.1A2.3,2.3,0,0,0,9.13,0Zm5.5,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5l-.6.3A4.5,4.5,0,0,1,15,2a2.29,2.29,0,0,1-.5-.3C14.23,1.45,14.33,1.25,14.63,1Zm1.6-1a2.09,2.09,0,0,0-1.7.8,5.26,5.26,0,0,1,3.9.1A2.39,2.39,0,0,0,16.23,0Zm5.7,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2.81.81,0,0,1,.5.3c.2.1.1.3-.1.5l-.6.3a4.41,4.41,0,0,1-2.8-.2,2.29,2.29,0,0,1-.5-.3C21.53,1.45,21.63,1.25,21.93,1Zm1.6-1a2.09,2.09,0,0,0-1.7.8,4.82,4.82,0,0,1,3.9.2A2.26,2.26,0,0,0,23.53,0Zm6,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5a1.42,1.42,0,0,0-.6.2,4.41,4.41,0,0,1-2.8-.2,2.29,2.29,0,0,1-.5-.3C29.13,1.45,29.13,1.25,29.53,1ZM31,0a2.09,2.09,0,0,0-1.7.8,4.78,4.78,0,0,1,3.9.2A2.17,2.17,0,0,0,31,0Z"/>
                                    <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M8.7,14.67c.36-.33.68-.64,1-.95l.57-.54c.09-.08.16-.18.05-.29s-.2,0-.29,0c-.57.55-1.13,1.09-1.71,1.63a.5.5,0,0,1-.31.12H6.17V10.18h8.29a.59.59,0,0,0,.19,0c.06,0,.15-.1.14-.14a.27.27,0,0,0-.13-.18.69.69,0,0,0-.25,0H6.18a.42.42,0,0,1,.44-.31h8.94c.3,0,.4.06.49.31h-.54c-.13,0-.24,0-.24.18s.12.16.23.16h.58v4.49H9.68L10.4,14l.14-.14c.09-.08.16-.17.06-.28s-.2-.05-.29,0l-.89.84C9.15,14.71,9.15,14.71,8.7,14.67Zm-.28,3.69H7.8v1.57h.62Zm5.42,0v1.56h.62V18.36ZM3.44,17.29c.15,0,.15,0,.12-.2h-1v.2Zm15.39,0h.73c.15,0,.21,0,.13-.21h-1C18.63,17.24,18.68,17.29,18.83,17.29ZM3.12,15.1A1.12,1.12,0,1,0,2,14,1.1,1.1,0,0,0,3.12,15.1ZM4,14a.92.92,0,0,1-.89.84.87.87,0,0,1,0-1.73A.92.92,0,0,1,4,14Zm-.87-2.57a.18.18,0,0,0-.2.19c0,.14.07.23.21.21a1,1,0,0,0,.23-.15C3.32,11.51,3.26,11.44,3.12,11.44Zm16,1.43A1.12,1.12,0,1,0,20.24,14,1.1,1.1,0,0,0,19.14,12.87Zm0,2A.87.87,0,1,1,20,14,.91.91,0,0,1,19.13,14.85Zm0-3a.18.18,0,0,0,.2-.21.17.17,0,0,0-.2-.19c-.14,0-.2.07-.23.26A.79.79,0,0,0,19.13,11.84Zm-16,2.67a.53.53,0,0,0,0-1,.53.53,0,1,0,0,1Zm16-1a.53.53,0,1,0,0,1,.49.49,0,0,0,.51-.52A.5.5,0,0,0,19.13,13.46ZM3.23,1.83a3.75,3.75,0,0,1-2.1,0c-.2-.1-.4-.1-.4-.4s.2-.3.4-.4a3,3,0,0,1,2.1.22c.1,0,.2.1.3.1a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C3.33,1.85,3.33,1.85,3.23,1.83Zm7.3,0a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.12c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C10.63,1.85,10.63,1.85,10.53,1.83Zm7,0a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3,3,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C17.73,1.85,17.63,1.85,17.53,1.85ZM25,1.75c0,.1-.07.1-.17.1a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32Zm7.43.1a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C32.53,1.85,32.53,1.85,32.43,1.85Z"/></svg>
                                styles:
                                  custom_fields:
                                    icon_wohnen:
                                     [top: 0%, left: 2%, width: 100%, position: absolute]
                                template: ['base', 'light']

                          - entity_id: light.kuche
                            state: 'on'
                            options:
                                type: custom:button-card
                                entity: light.kuche
                                name: KĆ¼che
                                custom_fields:
                                   icon_kuche: >
                                     <svg viewBox="0 0 35.02 31.02">
                                     <path fill="#9da0a2" d="M.33,1c.1,0,.3-.2.6-.2a3.87,3.87,0,0,1,2.6.1c.3.1.4.3.6.4s.1.3-.1.5a2.29,2.29,0,0,1-.5.3,5.24,5.24,0,0,1-2.8-.2l-.6-.3C-.07,1.45-.07,1.25.33,1Zm1.5-1a2.09,2.09,0,0,0-1.7.8A4.79,4.79,0,0,1,4,1,2.17,2.17,0,0,0,1.83,0Zm5.8,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5l-.6.3A4.5,4.5,0,0,1,8,2a2,2,0,0,0-.6-.4C7.23,1.45,7.23,1.25,7.63,1Zm1.5-1a2.09,2.09,0,0,0-1.7.8,5.26,5.26,0,0,1,3.9.1A2.3,2.3,0,0,0,9.13,0Zm5.5,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5l-.6.3A4.5,4.5,0,0,1,15,2a2.29,2.29,0,0,1-.5-.3C14.23,1.45,14.33,1.25,14.63,1Zm1.6-1a2.09,2.09,0,0,0-1.7.8,5.26,5.26,0,0,1,3.9.1A2.39,2.39,0,0,0,16.23,0Zm5.7,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2.81.81,0,0,1,.5.3c.2.1.1.3-.1.5l-.6.3a4.41,4.41,0,0,1-2.8-.2,2.29,2.29,0,0,1-.5-.3C21.53,1.45,21.63,1.25,21.93,1Zm1.6-1a2.09,2.09,0,0,0-1.7.8,4.82,4.82,0,0,1,3.9.2A2.26,2.26,0,0,0,23.53,0Zm6,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5a1.42,1.42,0,0,0-.6.2,4.41,4.41,0,0,1-2.8-.2,2.29,2.29,0,0,1-.5-.3C29.13,1.45,29.13,1.25,29.53,1ZM31,0a2.09,2.09,0,0,0-1.7.8,4.78,4.78,0,0,1,3.9.2A2.17,2.17,0,0,0,31,0ZM.66,15.59A1,1,0,0,1,1,15.51H6.68a1.57,1.57,0,0,1,.28.06l0,0a18.35,18.35,0,0,1,2.87-.08c.67,0,1.34,0,2,0,.14,0,.28.06.42.06s.23-.06.35-.06h4c0-.18,0-.35,0-.52s.11-.15.23-.15H18l0-.05.23-.28.22.27-.05.05h.33c0-.39,0-.78,0-1.17,0-.05.1-.13.16-.14s.15.08.15.13c0,.39,0,.79,0,1.18h.33l-.05-.05.24-.27.21.28,0,.05h1.06c.2,0,.28.07.26.27s0,.25,0,.4h.74a1.38,1.38,0,0,1,.29.08v7.5a1.09,1.09,0,0,1-.31.08H12.61c-.11,0-.22-.05-.32-.05s-.2.05-.3.05H8.8c-.36,0-.71,0-1.06,0s-.68,0-1,0c-1.93,0-3.86,0-5.79,0a.92.92,0,0,1-.27-.08Zm21,6.58V16.51H19v5.66Zm-3,0V16.51H16v5.66Zm-12-5.65H4v5.64H6.68Zm-5.7,0v5.65H3.69V16.51ZM7,15.81l-.12.68s0,0,0,.06a1.13,1.13,0,0,1,.06.31c0,1.52,0,3,0,4.54a11.52,11.52,0,0,0,0,1.44h5.31a1.48,1.48,0,0,0,.08-.29.27.27,0,0,0,0-.09,1.4,1.4,0,0,1-.06-.28c0-1.78,0-3.55,0-5.33,0-.12.08-.24.07-.35s-.08-.47-.11-.69Zm8.65.71h-3V18.2h3Zm-3,3.68h3V18.48h-3Zm3,2V20.48h-3v1.69Zm6.05.35H12.62l.06.31h9Zm-.05-6.67h-9v.31h9ZM6.71,22.52H1l.06.31H6.64Zm-.06-6.67H1v.31H6.65ZM17,15.49h3.75l-.06-.31H17Zm5-4.4a1,1,0,0,1-.29.08h-9.1c-.24,0-.28,0-.28-.28V6.12c0-.24,0-.28.28-.28h9.12a.92.92,0,0,1,.27.08Zm-5-.26V6.19H12.67v4.64Zm4.63-4.65H17.31v4.65h4.35Zm-21-.26A1,1,0,0,1,1,5.84H6.7c.27,0,.3,0,.3.3v4.71c0,.3,0,.32-.32.32H1a1,1,0,0,1-.29-.08ZM1,10.83H6.65V6.19H1Zm7.7-2a3,3,0,0,1,0-.31c0-.79,0-1.59,0-2.39,0,0,0-.09,0-.12s.1-.11.15-.17A1,1,0,0,1,9,6s0,.08,0,.12V8.55c0,.09,0,.18,0,.28h1.41a2.17,2.17,0,0,1,0-.25V6.1s0-.1,0-.12.11-.13.16-.13.12.08.15.13,0,.11,0,.17c0,.8,0,1.59,0,2.39,0,.1,0,.19,0,.3h.81A.52.52,0,0,1,12,9.4c0,.44,0,.44-.44.44H7.62c-.27,0-.29,0-.29-.3V9.38a.51.51,0,0,1,.53-.54H8.7Zm-1,.66h4c0-.28,0-.32-.29-.32H8C7.7,9.17,7.66,9.21,7.67,9.49Zm-.12,5.36c-.07,0-.14.1-.22.16.08.05.15.15.23.16H9.11c.07,0,.15-.11.22-.17-.08-.05-.15-.15-.22-.15-.26,0-.52,0-.77,0S7.81,14.83,7.55,14.85Zm4.22.32c.12,0,.24,0,.21-.17s-.14-.15-.21-.15c-.52,0-1,0-1.54,0-.12,0-.24,0-.22.17s.14.15.22.16c.26,0,.51,0,.77,0ZM9.82,10.4c0-.08-.1-.15-.15-.22s-.16.14-.16.21c0,.4,0,.79,0,1.19,0,.07.11.15.16.22s.15-.14.16-.22a3.75,3.75,0,0,0,0-.58A4,4,0,0,0,9.82,10.4Zm-1.16-.06c0-.06-.1-.11-.15-.16s-.16.1-.17.17a3.21,3.21,0,0,0,0,.62c0,.06.1.11.15.16s.14-.1.17-.17a1.6,1.6,0,0,0,0-.31A1.61,1.61,0,0,0,8.66,10.34Zm2,.32a1.6,1.6,0,0,0,0,.31c0,.06.1.15.16.15A.25.25,0,0,0,11,11a3.42,3.42,0,0,0,0-.64.22.22,0,0,0-.16-.15.21.21,0,0,0-.15.14,1.22,1.22,0,0,0,0,.33ZM20.78,17.5c.08,0,.15-.11.22-.16s-.14-.15-.21-.16a7.21,7.21,0,0,0-.93,0c-.06,0-.13.11-.19.16s.13.15.2.16a3.53,3.53,0,0,0,.46,0A2.26,2.26,0,0,0,20.78,17.5Zm-3.9-.32c-.08,0-.14.1-.21.15s.13.17.19.17a7.37,7.37,0,0,0,.94,0c.07,0,.13-.11.2-.16s-.13-.15-.21-.16a3.2,3.2,0,0,0-.44,0A3.65,3.65,0,0,0,16.88,17.18Zm-12,0c-.06,0-.12.1-.18.15s.12.16.19.17a7.53,7.53,0,0,0,.95,0c.06,0,.12-.1.18-.15s-.12-.16-.19-.17a3.34,3.34,0,0,0-.45,0A4.17,4.17,0,0,0,4.85,17.18Zm-2.06.32c.08,0,.14-.1.2-.16s-.12-.15-.19-.16a7.21,7.21,0,0,0-.93,0c-.07,0-.14.1-.2.16s.12.15.19.16a3.85,3.85,0,0,0,.48,0A2.26,2.26,0,0,0,2.79,17.5ZM12,20v2.21c0,.25,0,.29-.29.29H7.63c-.27,0-.3,0-.3-.3v-4.4c0-.27,0-.3.3-.3h4.08c.26,0,.29,0,.29.29Zm-.35-2.15h-4v4.3h4ZM9.19,16.52c-.07,0-.13.09-.19.15s.11.16.17.16a8,8,0,0,0,1,0c.06,0,.12-.1.18-.16s-.12-.14-.18-.15a2.36,2.36,0,0,0-.46,0A2.77,2.77,0,0,0,9.19,16.52Zm2.33-.33c-.07,0-.12.1-.18.15s.1.14.16.15.13-.07.24-.14C11.64,16.27,11.57,16.18,11.52,16.19Zm-2.86.49c0-.06-.1-.11-.16-.17s-.15.1-.15.16.08.13.16.24C8.58,16.8,8.67,16.73,8.66,16.68Zm-1-.35c0,.07.1.12.16.17s.13-.11.14-.17-.07-.12-.15-.23C7.76,16.21,7.68,16.28,7.69,16.33Zm3,.34c0,.06.1.11.16.17s.14-.11.14-.17-.07-.12-.15-.23C10.76,16.55,10.68,16.62,10.69,16.67Zm3.16.51c-.07,0-.12.1-.18.15s.11.16.17.17a3.64,3.64,0,0,0,.66,0c.06,0,.11-.1.16-.15s-.1-.15-.17-.17a1.22,1.22,0,0,0-.33,0A1.61,1.61,0,0,0,13.85,17.18Zm.64,2.32c.07,0,.11-.11.17-.16s-.12-.15-.18-.16a3.42,3.42,0,0,0-.64,0c-.06,0-.11.11-.17.16s.11.14.18.16a1.08,1.08,0,0,0,.31,0A1.22,1.22,0,0,0,14.49,19.5Zm0,2c.08,0,.13-.1.19-.15s-.11-.16-.17-.17a3.53,3.53,0,0,0-.65,0c-.06,0-.11.11-.17.17s.11.13.18.15a1.08,1.08,0,0,0,.31,0A1.05,1.05,0,0,0,14.47,21.5ZM14.22,9.85c-.07,0-.14.1-.22.15.07.06.14.16.22.16.41,0,.81,0,1.22,0,.08,0,.15-.1.22-.15s-.14-.15-.21-.16a4,4,0,0,0-.6,0A4.42,4.42,0,0,0,14.22,9.85Zm4.67,0c-.08,0-.15.1-.22.16s.15.15.22.15c.41,0,.82,0,1.22,0,.08,0,.15-.1.22-.16s-.14-.14-.22-.15a4,4,0,0,0-.6,0A4.26,4.26,0,0,0,18.89,9.85Zm-14.45.31c.08,0,.15-.1.22-.16s-.13-.15-.2-.15c-.42,0-.84,0-1.27,0-.06,0-.12.1-.19.16s.13.15.2.15a4.3,4.3,0,0,0,.62,0A4.26,4.26,0,0,0,4.44,10.16Zm6.65,8.35c.12,0,.23,0,.23-.17s-.11-.17-.23-.17H8.25c-.12,0-.24,0-.24.16s.12.18.24.18h2.84Z"/>
                                     <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M3.23,1.83a3.75,3.75,0,0,1-2.1,0c-.2-.1-.4-.1-.4-.4s.2-.3.4-.4a3,3,0,0,1,2.1.22c.1,0,.2.1.3.1a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C3.33,1.85,3.33,1.85,3.23,1.83Zm7.3,0a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.12c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C10.63,1.85,10.63,1.85,10.53,1.83Zm7,0a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3,3,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C17.73,1.85,17.63,1.85,17.53,1.85ZM25,1.75c0,.1-.07.1-.17.1a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32Zm7.43.1a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C32.53,1.85,32.53,1.85,32.43,1.85ZM11.66,9.49c0-.28,0-.32-.29-.32H8c-.26,0-.3,0-.29.32Z"/></svg>
                                styles:
                                  custom_fields:
                                    icon_kuche:
                                      [top: 0%, left: 6%, width: 100%, position: absolute]
                                template: ['light']

                          - entity_id: light.tradfri_esszimmer
                            state: 'on'
                            options:
                                type: custom:button-card
                                entity: light.tradfri_esszimmer
                                name: Essen
                                custom_fields:
                                   icon_essen: >
                                     <svg viewBox="0 0 35.02 31.02">
                                     <path fill="#9da0a2" d="M12.82,3.81c.32-.09.38.11.42.32a.63.63,0,0,0,.41.47,2.34,2.34,0,0,1,1.43,1.91c0,.16,0,.23-.19.23H10.47c-.2,0-.25-.07-.2-.32a2.42,2.42,0,0,1,1.51-1.87c.15-.06.25-.13.27-.29l0-.12c.06-.21.11-.43.44-.33V.29c0-.06,0-.13,0-.18A.16.16,0,0,1,12.66,0a.22.22,0,0,1,.15.1.64.64,0,0,1,0,.2V3.81Zm1.95,2.63A2,2,0,0,0,13.58,4.9.87.87,0,0,1,13,4.2a.17.17,0,0,0-.1-.1c-.35-.07-.42,0-.53.31a.49.49,0,0,0,0,.11.32.32,0,0,1-.27.26,2.07,2.07,0,0,0-1.39,1.46,1.06,1.06,0,0,0,0,.2Zm4-2.63V.28c0-.05,0-.12,0-.16A.29.29,0,0,1,18.9,0s.1.07.13.13,0,.09,0,.14V3.78a.92.92,0,0,1,.19,0c.06,0,.16.08.17.14a1,1,0,0,0,.61.73,2.28,2.28,0,0,1,1.29,1.75c.05.27,0,.32-.27.32H16.75c-.27,0-.31,0-.26-.3A2.39,2.39,0,0,1,18,4.55a.38.38,0,0,0,.26-.29.78.78,0,0,1,.05-.14C18.37,3.92,18.43,3.72,18.74,3.81ZM21,6.43c0-.08,0-.14,0-.2A1.88,1.88,0,0,0,19.81,4.9a.87.87,0,0,1-.64-.7A.17.17,0,0,0,19,4.1c-.38,0-.38,0-.51.32,0,0,0,0,0,0a.4.4,0,0,1-.33.34,2,2,0,0,0-1.4,1.63ZM1.62,16.27H1c-.15,0-.21-.07-.21-.22v-.63H.26c-.23,0-.26,0-.26-.26V14c0-.23,0-.27.27-.27h4v-2a.89.89,0,0,1,1-.95H7.48a.91.91,0,0,1,.9.9v2.08h2.24v-2a.9.9,0,0,1,1-1h2a1.79,1.79,0,0,1,.4,0,.9.9,0,0,1,.71.89V13.7h4c.28,0,.31,0,.31.31s0,.78,0,1.17c0,.17-.06.25-.23.24h-.58V16c0,.24,0,.26-.27.26h-.55v.25c-.05,2.25-.09,4.5-.14,6.75,0,.24,0,.27-.27.27h-.52c-.21,0-.26,0-.26-.25,0-1.44-.06-2.88-.08-4.33q0-1.32-.06-2.67H14.71v.47H15a.68.68,0,0,1,.63.42.6.6,0,0,1-.16.68.42.42,0,0,0-.08.21.88.88,0,0,0,0,.28c0,.17-.07.24-.24.23h-.29v3.92c0,.3,0,.31-.32.31-.13,0-.26,0-.39,0s-.21-.09-.21-.23c0-.56,0-1.11,0-1.66a.37.37,0,0,0-.17-.33c-.37-.27-.73-.56-1.12-.86a7.26,7.26,0,0,1-.78.59,1,1,0,0,0-.52,1.07c0,.39,0,.79,0,1.19,0,.17-.06.24-.23.23a3.38,3.38,0,0,0-.45,0c-.17,0-.23-.06-.23-.23,0-.83,0-1.65,0-2.48V18.57h-.32c-.13,0-.21-.05-.2-.2v-.2a.45.45,0,0,0-.13-.37.55.55,0,0,1-.12-.63.67.67,0,0,1,.57-.42c.11,0,.23,0,.35,0v-.48H8.39v.48h.29a.67.67,0,0,1,.63.43.6.6,0,0,1-.16.68.37.37,0,0,0-.09.2,1.71,1.71,0,0,0,0,.32.17.17,0,0,1-.19.19H8.53v3.95c0,.27,0,.28-.27.28H7.89c-.24,0-.26,0-.26-.25V20.87a.28.28,0,0,0-.12-.25l-1.17-.9-1.22.94a.32.32,0,0,0-.06.2c0,.54,0,1.08,0,1.62,0,.31,0,.32-.32.32h-.3c-.27,0-.29,0-.29-.28V18.57H3.82c-.14,0-.21-.06-.21-.2v-.15a.51.51,0,0,0-.14-.43.54.54,0,0,1-.09-.64.66.66,0,0,1,.57-.4c.11,0,.22,0,.34,0v-.47H3v.44Q2.88,20,2.82,23.21c0,.3,0,.32-.32.32H2c-.23,0-.26,0-.26-.26,0-1.11-.05-2.22-.07-3.33s-.05-2.35-.07-3.52C1.63,16.37,1.62,16.33,1.62,16.27ZM.3,15.12H13.09c.05,0,.11,0,.15,0s.13.09.12.14-.08.12-.13.14a1.31,1.31,0,0,1-.28,0H1.12V16H17.88v-.54h-1c-.11,0-.22,0-.22-.14s.1-.16.22-.16H18.7c0-.32,0-.62,0-.91s0-.22-.21-.22H.48c-.09,0-.18,0-.18.12Zm7.78-1.43c0-.73,0-1.46,0-2.18A.53.53,0,0,0,7.54,11H5.27a.59.59,0,0,0-.67.66v1.84c0,.06,0,.11,0,.17Zm2.84,0H14.4V11.62c0-.31-.19-.57-.45-.57-.84,0-1.69,0-2.53,0a.5.5,0,0,0-.5.51C10.91,12.25,10.92,13,10.92,13.68ZM8.75,18H5.32c-.06,0-.12,0-.17,0S5,17.94,5,17.89s.08-.11.14-.14a.42.42,0,0,1,.16,0H8.66c.27,0,.39-.11.39-.34s-.12-.35-.39-.35H4c-.25,0-.38.13-.38.34a.35.35,0,0,0,.37.35.28.28,0,0,1,.13,0c.15,0,.42-.12.42.15s-.26.11-.41.14H3.91v.21H8.75ZM2.52,23.22l.14-6.94H1.92l.14,6.94Zm14.41,0,.15-6.94h-.74l.14,6.94Zm-4.26-6.17H10.32c-.27,0-.4.14-.38.39s.15.3.4.3h4.73a.33.33,0,0,0,.29-.44c0-.21-.2-.25-.38-.25Zm-8.06-.31H8.07v-.46H4.61Zm9.78-.46H10.93v.46h3.46ZM4.74,22.49V18.58H4.45v3.91Zm9.51-3.91v3.9h.3v-3.9Zm-6,3.91v-3.9H7.94v3.9Zm2.55-3.91v3.91h.29V18.58Zm4.31-.53H10.25v.21h4.83Zm-7.46.68-1,.8,1,.8Zm3.76,0v1.6l1-.8Zm-6.31,0v1.58l1-.79Zm8.87,0-1,.8,1,.8Zm-8.59-.15.93.71s.11,0,.15,0,.31-.24.46-.35l.43-.34Zm6.32,0,.54.42c.15.11.3.3.45.3s.3-.19.45-.31l.54-.41ZM14.14,15c-.11,0-.22,0-.2.16a.27.27,0,0,0,.2.13h1.34c.1,0,.19,0,.2-.14s-.09-.16-.2-.16H14.14Z"/>
                                     <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.77,6.44H10.59a1.06,1.06,0,0,1,0-.2A2.07,2.07,0,0,1,12,4.78a.32.32,0,0,0,.27-.26.49.49,0,0,1,0-.11c.11-.33.18-.38.53-.31a.17.17,0,0,1,.1.1.87.87,0,0,0,.63.7A2,2,0,0,1,14.77,6.44Zm6.17-.21A1.88,1.88,0,0,0,19.81,4.9a.87.87,0,0,1-.64-.7A.17.17,0,0,0,19,4.1c-.38,0-.38,0-.51.32,0,0,0,0,0,0a.4.4,0,0,1-.33.34,2,2,0,0,0-1.4,1.63H21C21,6.35,21,6.29,20.94,6.23Zm-3.42-.15a.18.18,0,0,1-.13-.14s.08-.13.12-.13a3.31,3.31,0,0,1,.63,0c.05,0,.12.09.12.14s-.07.12-.12.13a1.61,1.61,0,0,1-.31,0h0A1.06,1.06,0,0,1,17.52,6.08ZM18.92,6c0,.13-.1.14-.21.14s-.22,0-.19-.16.12-.11.22-.2C18.83,5.82,18.92,5.88,18.92,6Z"/></svg>`; ]]]
                                styles:
                                  custom_fields:
                                    icon_essen:
                                      [top: 0%, left: 6%, width: 100%, position: absolute]
                                template: ['light']

                          - entity_id: light.wc
                            state: 'on'
                            options:
                                type: custom:button-card
                                entity: light.wc
                                name: WC
                                custom_fields:
                                   icon_wc: >
                                    <svg viewBox="0 0 35.02 31.02">
                                    <path style="clip-path: url(#mask);" fill="#9da0a2" d="M8.13,1A3,3,0,0,1,8.69.76a4.48,4.48,0,0,1,2.73.18,1.77,1.77,0,0,1,.56.39.27.27,0,0,1-.05.46,1.86,1.86,0,0,1-.59.27,5.11,5.11,0,0,1-2.82-.17A1.92,1.92,0,0,1,8,1.6C7.79,1.41,7.81,1.23,8.13,1ZM9.69,0A2,2,0,0,0,8,.83,4.8,4.8,0,0,1,11.89,1,2.19,2.19,0,0,0,9.69,0ZM3.33,16.91v1h.24v.51H.35c-.27,0-.35-.08-.35-.34V9.77A.25.25,0,0,1,.27,9.5H2.8c.18,0,.27.11.27.32v4h.77c0-.34,0-.67,0-1A2.15,2.15,0,0,1,4,12.31c.3-1,.61-2.08.91-3.12a1.25,1.25,0,0,1,1.3-1,4,4,0,0,0,.49,0l-.25-.07A1.66,1.66,0,0,1,7,4.9c.5,0,1,0,1.51,0A.54.54,0,0,0,9,4.63l.26-.39.41.28a1.27,1.27,0,0,1-1.49.86A1.66,1.66,0,0,1,8.54,7.1,1.62,1.62,0,0,1,7.28,8.2L8,8.59a1.73,1.73,0,0,1,0-.3,1,1,0,0,1,2,.08l.42,3.3a1,1,0,0,1-.73,1.12l-.11,0a.84.84,0,0,1,.58,1c-.07,1-.13,2-.19,3v.09h.21a.76.76,0,0,1,.75.76,4,4,0,0,1,0,.49.25.25,0,0,1-.27.29H9.17a.74.74,0,0,1-.73-.79c0-.59.07-1.18.11-1.77s.06-1,.1-1.52H7.42v.4a6.7,6.7,0,0,1,0,.9,1.5,1.5,0,0,1-1.47,1.25c-.8,0-1.6,0-2.39,0Zm-2.81,1H2.8v-1H2.06V16.4H5.87a1,1,0,0,0,1-.87,11.22,11.22,0,0,0,0-1.16H.52ZM7.76,9.5a.68.68,0,0,0-.67-.77H6.15a.71.71,0,0,0-.75.56c-.3,1-.58,2-.89,3a3.4,3.4,0,0,0-.16,1.18c0,.29.07.37.37.37H8.85c.24,0,.33.1.32.33s0,.51-.05.77c0,.89-.11,1.78-.17,2.68,0,.21.09.31.3.31h1.12l.1,0c0-.43,0-.5-.44-.5h0c-.56,0-.54-.11-.51-.55.07-1.07.14-2.14.2-3.21,0-.23-.08-.33-.32-.33h-2c-.49,0-1,0-1.47-.05-.3,0-.38-.21-.22-.46l.65-1,.35-.54c-.28-.18-.55-.34-.8-.52a1,1,0,0,1-.43-1,1,1,0,0,1,.68-.81,1,1,0,0,1,.88.12ZM10,11.8v-.1c-.14-1.09-.28-2.17-.41-3.26a.51.51,0,1,0-1,.13c.06.53.13,1,.2,1.58,0,.14,0,.26-.11.34s-.24,0-.35-.05L6.84,9.52a.67.67,0,0,0-.39-.1.47.47,0,0,0-.42.4.49.49,0,0,0,.23.53l1,.66,1.89,1.22a.51.51,0,0,0,.8-.43ZM.53,11v2.79h2V11ZM8.12,6.56A1.14,1.14,0,0,0,7,5.41a1.15,1.15,0,1,0,0,2.3A1.15,1.15,0,0,0,8.12,6.56Zm-.95,5-.81,1.26H9.14Zm-6.65-1h2V10h-2ZM4.1,14.88v.49H6.39v-.49Zm15.28-4.35a1.16,1.16,0,0,1-.58-.14s-.06,0-.09,0a1.49,1.49,0,0,1-1,.56,1.31,1.31,0,0,1-.59,0A.12.12,0,0,0,17,11a1.42,1.42,0,0,1-1.52.58l-.21-.08a.08.08,0,0,0-.11,0,.86.86,0,0,1-.76.37.94.94,0,0,1-.73-1.4c0-.06,0-.08,0-.12A1.68,1.68,0,0,1,13,9.61a1.73,1.73,0,0,1-.12-.78.13.13,0,0,0-.09-.14,1.44,1.44,0,0,1-.78-1A1.48,1.48,0,0,1,12.87,6a.08.08,0,0,0,.05-.12,1.64,1.64,0,0,1,.25-1.34,1.51,1.51,0,0,1,.77-.59,1.44,1.44,0,0,1,.87,0c.07,0,.1,0,.12,0a1.42,1.42,0,0,1,2.53-.21c.09.15.08.14.24.12a3.88,3.88,0,0,1,.48,0c.06,0,.09,0,.11-.08A1.05,1.05,0,0,1,19.57,3a1,1,0,0,1,.76.85A1.06,1.06,0,0,1,20,4.9s-.05,0-.08.06-.1.08-.09.2a2,2,0,0,1,0,.34c0,.07,0,.1.08.12a1.61,1.61,0,0,1,.76.5,1.75,1.75,0,0,1,.43,1.37,1.72,1.72,0,0,1-.51,1.07.09.09,0,0,0,0,.12,1.33,1.33,0,0,1-.95,1.83ZM14.45,10v0a.81.81,0,0,1,.47.13.89.89,0,0,1,.42.86c0,.07,0,.1.08.11l.19.07a1,1,0,0,0,1.17-.59c.08-.14.15-.17.3-.12a1.14,1.14,0,0,0,.94,0,1.3,1.3,0,0,0,.5-.46.19.19,0,0,1,.32-.06.85.85,0,0,0,.55.18.88.88,0,0,0,.78-.48.94.94,0,0,0,0-.93c-.11-.19-.1-.24,0-.38a1.39,1.39,0,0,0-.61-2.42c-.14,0-.19-.09-.18-.24s0-.23,0-.34a1.35,1.35,0,0,0-1-1.22,1.28,1.28,0,0,0-.92.08.18.18,0,0,1-.26-.11A.77.77,0,0,0,17.2,4a1.05,1.05,0,0,0-1.52-.44,1.11,1.11,0,0,0-.47.68.2.2,0,0,1-.29.15h0a1,1,0,0,0-.69-.06A1.23,1.23,0,0,0,13.35,6c.07.16,0,.26-.15.31l-.08,0a1.1,1.1,0,0,0-.68,1.49,1,1,0,0,0,.67.62.2.2,0,0,1,.16.25v.06a1.41,1.41,0,0,0,.68,1.42.14.14,0,0,0,.14,0Zm4.78-6.71a.66.66,0,0,0-.56.38c0,.06,0,.09,0,.12a1.67,1.67,0,0,1,.87.75c.05.09.06.09.14,0A.74.74,0,0,0,20,3.81.73.73,0,0,0,19.23,3.33ZM15,11c0-.05,0-.1,0-.14a.52.52,0,0,0-1-.17.42.42,0,0,0,0,.12.14.14,0,0,1,0,.06s0,0,0,.07A.53.53,0,1,0,15,11ZM14,3.13a.44.44,0,0,0,.43.45.45.45,0,0,0,.43-.44.44.44,0,0,0-.43-.45A.44.44,0,0,0,14,3.13Zm5.3,7.67a.39.39,0,0,0-.39.4.39.39,0,1,0,.78,0A.4.4,0,0,0,19.32,10.8Zm1.22-5.94a.3.3,0,0,0-.3.31.3.3,0,0,0,.3.3.29.29,0,0,0,.3-.3A.29.29,0,0,0,20.54,4.86Zm-2.79,6.59a.17.17,0,0,0-.17-.16.16.16,0,0,0-.16.16.17.17,0,0,0,.16.17A.18.18,0,0,0,17.75,11.45Zm-5.22-.93a.16.16,0,0,0,.32,0,.16.16,0,1,0-.32,0Zm.9-6.95a.17.17,0,0,0,.17.16.17.17,0,0,0,.16-.16.18.18,0,0,0-.17-.17A.18.18,0,0,0,13.43,3.57Zm5.65,3.49a1.78,1.78,0,0,1-.74,1.43c-.09.07-.19.13-.28.21a.12.12,0,0,0,0,.09,1.33,1.33,0,0,1,0,.28A.64.64,0,0,1,17,9.4a.1.1,0,0,0-.12,0,.64.64,0,0,1-.7,0,.11.11,0,0,0-.12,0,.67.67,0,0,1-.63,0A.46.46,0,0,1,15.15,9a.42.42,0,0,0-.23-.4,1.88,1.88,0,0,1-.72-.84,1.59,1.59,0,0,1-.13-.88,1.89,1.89,0,0,1,.37-.92A2.27,2.27,0,0,1,15.84,5a2.8,2.8,0,0,1,2.63.62A1.84,1.84,0,0,1,19.08,7.06ZM16.79,5.31A2.49,2.49,0,0,0,15,5.87a1.61,1.61,0,0,0-.52,1,1.3,1.3,0,0,0,.26,1,2.16,2.16,0,0,0,.64.56.28.28,0,0,1,.16.27,1.31,1.31,0,0,0,0,.28c0,.09.09.13.19.13A.18.18,0,0,0,15.94,9s0-.05,0-.07a.22.22,0,0,1,.19-.15.19.19,0,0,1,.2.13l0,.1a.16.16,0,0,0,.19.12.18.18,0,0,0,.2-.17.18.18,0,0,1,.12-.16.21.21,0,0,1,.29.17.19.19,0,0,0,.22.16.18.18,0,0,0,.19-.18v-.2c0-.15.05-.24.18-.32a2.16,2.16,0,0,0,.64-.56,1.47,1.47,0,0,0-.11-1.8A2.06,2.06,0,0,0,16.79,5.31Zm2.06,3.13a.31.31,0,0,0-.3.32.32.32,0,0,0,.3.31.32.32,0,0,0,0-.63ZM16.37,4.12a.21.21,0,0,0-.21-.21.2.2,0,0,0-.21.22.21.21,0,0,0,.21.21A.21.21,0,0,0,16.37,4.12ZM13.63,7.68a.21.21,0,1,0,.21.21A.21.21,0,0,0,13.63,7.68Zm6.13.52A.17.17,0,0,0,19.6,8a.16.16,0,0,0-.16.17.16.16,0,1,0,.32,0Zm-.24-.86a.11.11,0,0,0-.11-.12.1.1,0,0,0-.11.11.1.1,0,0,0,.1.11A.11.11,0,0,0,19.52,7.34ZM14.11,8.39A.12.12,0,0,0,14,8.5a.12.12,0,0,0,.11.11.1.1,0,0,0,.11-.11A.1.1,0,0,0,14.11,8.39Zm2.72-4a.1.1,0,0,0-.12.1.11.11,0,0,0,.1.12.12.12,0,0,0,.12-.11A.1.1,0,0,0,16.83,4.39Zm.58,3.29a.79.79,0,0,1-.84-.74.85.85,0,0,1,1.69,0A.79.79,0,0,1,17.41,7.68Zm0-.36a.38.38,0,1,0,0-.76.43.43,0,0,0-.44.38A.42.42,0,0,0,17.41,7.32Zm-1.91.56a.8.8,0,0,1-.84-.74.8.8,0,0,1,.86-.74.79.79,0,0,1,.84.76A.81.81,0,0,1,15.5,7.88Zm.44-.74a.41.41,0,0,0-.43-.38.43.43,0,0,0-.44.37.42.42,0,0,0,.44.39A.41.41,0,0,0,15.94,7.14Zm.62,1.26h.19c.27,0,.43-.26.3-.45a1.39,1.39,0,0,0-.21-.27.37.37,0,0,0-.52,0,1.68,1.68,0,0,0-.25.29.29.29,0,0,0,.23.42,1.1,1.1,0,0,0,.26,0Z"/></clipPath></defs><path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M11.24,1.74c.18-.14.2-.26.07-.39a1,1,0,0,0-.25-.17A3.25,3.25,0,0,0,9,1c-.18.05-.4.11-.41.33s.2.3.37.37a3.24,3.24,0,0,0,2.15.08A.62.62,0,0,0,11.24,1.74Zm6.17,5.58A.42.42,0,0,1,17,6.94a.43.43,0,0,1,.44-.38.38.38,0,1,1,0,.76Zm-1.47-.18a.41.41,0,0,1-.43.38.42.42,0,0,1-.44-.39.43.43,0,0,1,.44-.37A.41.41,0,0,1,15.94,7.14Z"/></svg>
                                styles:
                                  custom_fields:
                                    icon_wc:
                                      [top: 0%, left: 6%, width: 100%, position: absolute]
                                template: ['light']

                      sort:
                        method: last_changed
                        count: 5
                      card:
                        type: custom:layout-card
                        layout: horizontal
                        min_columns: 5
                        column_width: 18%
                        justify-content: flex-start

and this is the result:
1
2
3
4

170

Funny you mention this, I have this problem since v14 and on smaller screens the buttons in the middle are always smaller in height (the width is fine). I have tried so many things but it seems I have not the skills to fix it.

I donā€™t understand how it can work for you guys since you guys run v15 (which has the very same problem for me). Only v14 works, but the spacings left and right are huge. So I am currently still on v13, though v13 has a bug that when resizing the window on a browser the view will go into an LSD trip and is unusable
This is fixed in v14 and up but canā€™t use that because of the buttons getting smaller.

I also wonder if this will ever be updated since well, your post is almost a month old, and the other card from this developer (more-info-card) also has problems (unfortunately he didnt respond to that issue either).

So either heā€™s fed up with the custom cards (or fed up by people nagging him about them). Or he is working on core (which would be the best scenario imho) or he simply stopped developing for HA all together. Who knows? If someone does know please reply here.

Its a shame because his cards are really good (when they work as intended) and Iā€™d hate to see them go.

1 Like
171

Yeah it is a shame, though I understand if heā€™s done with it. HA pumps out updates every week and a major every 3 weeks or so, which can break lots of stuff. I really hope Thomasā€™ work gets incorporated into the core, because as of right now, they are kinda musthaves (especially browser_mod, card_mod, card_tools).

I decided to only use layout-card to put my UI inside a column to add some paddings. Iā€™m not looking into breaking my UI every three weeks. I guess itā€™s time I get my app developing skills and create a native app based of my UI so I donā€™t have to worry anymore xD

172

With version 16 and HA 115.3, the layout is a bit of. The button card in column 2 is less high as the rest (only on mobile)

Any idea how to resolve this ?

afbeelding
afbeelding759Ɨ565 53 KB

EDIT: I just now saw the posts from above from ppl having the same issue :frowning:

173

Same problem here, you can downgrade to version 12 to solve this.

174

Hello guys, iā€™m trying to understand how to align all the column to the left.

The default behavior of this card put the cards on the middle of the screen.
Can i set it to ā€œstartā€ from the left side?

Thank you!

EDIT: Iā€™m using it in panel mode!

1 Like
175

Iā€™m actually on version 15 which works for me.

176

Any news about this?

177

I temporary switched to Layout Card Gridder.

1 Like
178

Hello friends. I ask because I know that at the beginning it was very complicated and now it is solved. I have a view that is armed with a 2x2 grid, but when I break the phone I would like to see it as a 1x4 grid or vertically. If there is a solution for this, I would like you to help me. Excellent what they programmed and thank you very much.

type: 'custom:layout-card'
layout: vertical
column_width: 100%
cards:
  - type: 'custom:layout-card'
    layout: grid
    gridrows: auto auto
    gridcols: 40% 60%
    min-witdh: 40px
    cards:
      - type: thermostat
        entity: climate.acuario
        gridrow: 1 / 1
        gridcol: 1 / 1
        style: 'ha-card { height: 100%; }'
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.temperature
        hours_to_show: 24
        name: Temperatura de acuario
        points_per_hour: 2
        show:
          extrema: true
      - type: vertical-stack
        gridrow: 2 / 4
        gridcol: 1
        style: 'ha-card { height: 100%; }'
        cards:
          - type: horizontal-stack
            cards:
              - entity: switch.enchufe_termometro_acuario
                hold_action:
                  action: more-info
                icon: 'mdi:fan'
                icon_height: 40px
                name: Fan
                show_icon: true
                show_name: true
                tap_action:
                  action: toggle
                theme: default
                type: entity-button
              - color: var(--state-icon-active-color)
                entity: input_boolean.clima_manual
                icon: 'mdi:air-conditioner'
                icon_height: 40px
                name: Aire
                state:
                  - color: null
                    value: 'off'
                type: 'custom:button-card'
              - entity: switch.enchufe_retorno
                hold_action:
                  action: more-info
                icon: 'mdi:power'
                icon_height: 40px
                name: Retorno
                show_icon: true
                show_name: true
                tap_action:
                  action: toggle
                theme: default
                type: entity-button
              - entity: switch.enchufe_skimmer
                hold_action:
                  action: more-info
                icon: 'mdi:power'
                icon_height: 40px
                name: Skimmer
                show_icon: true
                show_name: true
                tap_action:
                  action: toggle
                theme: default
                type: entity-button
          - type: horizontal-stack
            cards:
              - entity: switch.sonoff_refugio
                hold_action:
                  action: more-info
                icon: 'mdi:radiator'
                icon_height: 40px
                name: Calefactor
                show_icon: true
                show_name: true
                tap_action:
                  action: toggle
                type: entity-button
              - entity: switch.sonoff_refugio
                hold_action:
                  action: more-info
                icon: 'mdi:ceiling-light'
                icon_height: 40px
                name: Refugio
                show_icon: true
                show_name: true
                show_state: false
                tap_action:
                  action: toggle
                type: button
              - entity: switch.enchufe_luz_sump
                hold_action:
                  action: more-info
                icon: 'mdi:ceiling-light'
                icon_height: 40px
                name: Luz Sump
                show_icon: true
                show_name: true
                tap_action:
                  action: toggle
                type: button
      - type: 'custom:flex-table-card'
        gridrow: 2 / 2
        gridcol: 2 / 2
        columns:
          - attr_as_list: mediciones
            modify: x.KH
            name: KH
          - attr_as_list: mediciones
            modify: x.CA
            name: CA
          - attr_as_list: mediciones
            modify: x.MG
            name: MG
          - attr_as_list: mediciones
            modify: x.NO3
            name: NO3
          - attr_as_list: mediciones
            modify: x.PO4
            name: PO4
          - attr_as_list: mediciones
            modify: x.Fecha
            name: Fecha
        entities:
          include: sensor.mediciones
        title: Mediciones del Acuario

Sin tĆ­tulo
Sin tƭtulo1657Ɨ720 58 KB

179

Continuing the discussion from :small_blue_diamond: Layout-card - Take control of where your cards end up:

Hello,

I am a newbie.
Iā€™ve been working on the current problem most of the weekend and canā€™t get any further.

Advance info:
The following file ui-lovelace.yaml is only a test file for error analysis and to describe the problem. Even in this shortened version, the layout card does not work as intended.

Problem description:
I put the ui-lovelace.yaml in the config directory, restart the application via ā€œserver managementā€ and nothing is displayed in the home view (see screenshot). In the other views (light and music) the cards are displayed immediately.
In the dashboard-view i have to click on ā€œRefreshā€ to get the cards displayed.

Where is my mistake?
Thank you in advance for your help

ui-lovelace.yaml:

title: Home
path: home
views:
  - path: dasboard
    title: dashboard-Tab
    icon: 'mdi:home-assistant'
    panel: true
    cards:
      - type: 'custom:layout-card'
        layout: horizontal
        max_columns: 3
        cards:
          - type: markdown
            title: Card-1
            content: Dummy 1
          - type: markdown
            title: Card-2
            content: Dummy 1
          - type: markdown
            title: Card-3
            content: Dummy 1
          - type: markdown
            title: Card-4
            content: Dummy 1
          - type: markdown
            title: Card-5
            content: Dummy 1
          - type: markdown
            title: Card-6
            content: Dummy 1
  - path: light
    title: Light-Tab
    icon: 'mdi:lamp'
    panel: true
    cards:
      - type: 'custom:layout-card'
        layout: horizontal
        max_columns: 3
        cards:
          - type: markdown
            title: Card-1
            content: Dummy 1
          - type: markdown
            title: Card-2
            content: Dummy 1
          - type: markdown
            title: Card-3
            content: Dummy 1
          - type: markdown
            title: Card-4
            content: Dummy 1
          - type: markdown
            title: Card-5
            content: Dummy 1
          - type: markdown
            title: Card-6
            content: Dummy 1
  - path: music
    title: Music-Tab
    icon: 'mdi:music'
    panel: true
    cards:
      - type: 'custom:layout-card'
        layout: horizontal
        max_columns: 3
        cards:
          - type: markdown
            title: Card-1
            content: Dummy 1
          - type: markdown
            title: Card-2
            content: Dummy 1
          - type: markdown
            title: Card-3
            content: Dummy 1
          - type: markdown
            title: Card-4
            content: Dummy 1
          - type: markdown
            title: Card-5
            content: Dummy 1
          - type: markdown
            title: Card-6
            content: Dummy 1

dashboard2
dashboard21712Ɨ255 6.65 KB

1 Like
180

you can use my fork, linked to in the post just above yours. Iā€™ve made it easy to define a responsive grid layout, example code is available in the readme.
Iā€™ve read in a WTH post that native support for this will come to lovelace at some point, but untill thenā€¦

181

I think youā€™re correct about some native support.

It is implied in this.

182

Thanks friend

183

@kdw2060
Does your fork re-instate the top and side margins that suddenly disappeared with HA 0.116.x ?
My grid layout views have horizontal and intermittent vertical scroll bars now which do not go away if the browser is maximised or zoomed out. Tried this on Edge and Chrome, both are the same.