search

custom-cards / stack-in-card

🛠 group multiple cards into one card without the borders
MIT License
285 stars 24 forks source link

Elements not initially in the right spot #58

Open theepicsaxguy opened 1 year ago

theepicsaxguy commented 1 year ago

Checklist:

Release with the issue:

Last working release (if known):

Browser and Operating System:

IOS, MacOS Windows and Android. Chrome home assistant app and edge.

Description of problem:

When using a stack-in-card the elements are not loaded correctly. They kind of snap in place after the loading of the view.

Am I missing something? Or is this expected?

ezgif-2-c8336ea04a.gif

Javascript errors shown in the web inspector (if applicable):

Uncaught (in promise) TypeError: e.setConfig is not a function
    render button-card.js:425
    update button-card.js:1
    performUpdate button-card.js:1
    _enqueueUpdate button-card.js:1
    requestUpdateInternal button-card.js:1
    initialize button-card.js:1
    initialize button-card.js:1
    J button-card.js:1
    st button-card.js:1
    ti button-card.js:425
    C scoped-custom-element-registry.js:385
    t scoped-custom-element-registry.js:236
    r create-element-base.ts:93
    h create-element-base.ts:111
    h create-element-base.ts:215
    c create-element-base.ts:172
    w create-card-element.ts:101
    _createCard button-card.js:425
    _buildCustomFields button-card.js:438
    _buildCustomFields button-card.js:438
    _gridHtml button-card.js:517
    _buttonContent button-card.js:499
    _cardHtml button-card.js:479
    render button-card.js:425
    update button-card.js:1
    performUpdate button-card.js:1
    _enqueueUpdate button-card.js:1
    requestUpdateInternal button-card.js:1
    initialize button-card.js:1
    initialize button-card.js:1
    J button-card.js:1
    st button-card.js:1
    ti button-card.js:425
    C scoped-custom-element-registry.js:385
    t scoped-custom-element-registry.js:236
    r create-element-base.ts:93
    h create-element-base.ts:111
    h create-element-base.ts:215
    c create-element-base.ts:172
    w create-card-element.ts:101
    value hui-stack-card.ts:102
    _cards hui-stack-card.ts:47
    value hui-stack-card.ts:46
    r create-element-base.ts:97
    h create-element-base.ts:140
    h create-element-base.ts:238
    c create-element-base.ts:172
    w create-card-element.ts:101
    value hui-stack-card.ts:102
    _cards hui-stack-card.ts:47
    value hui-stack-card.ts:46
    h create-element-base.ts:149
    promise callback*7778/h/< create-element-base.ts:145
    h create-element-base.ts:238
    c create-element-base.ts:172
anonymous@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350 line 425 > Function:4:6
_evalTemplate@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:9389
_getTemplateOrValue@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:9976
_getTemplateOrValue/<@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:9869
_getTemplateOrValue@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:9846
_getTemplateOrValue/<@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:9869
_getTemplateOrValue@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:9846
_objectEvalTemplate@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:9685
_buildCustomFields/<@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:433:360
_buildCustomFields@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:433:292
_gridHtml@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:517:25
_buttonContent@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:499:454
_cardHtml@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:479:18
render@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:6924
update@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:19873
performUpdate@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:16761
_enqueueUpdate@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:16413
async*requestUpdateInternal@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:16203
initialize@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:14558
initialize@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:19159
J@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:12477
st@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:18570
ti@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:4854
C@https://ha.pc-tips.se/frontend_latest/app-qElYkN9pnTU.js:2:15285
t@https://ha.pc-tips.se/frontend_latest/app-qElYkN9pnTU.js:2:13196
r@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13574
7778/h/<@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14021
h@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14283
c@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13700
w@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13042
_createCard@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:5695
_buildCustomFields/<@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:438:213
_buildCustomFields@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:438:30
_gridHtml@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:517:25
_buttonContent@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:499:454
_cardHtml@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:479:18
render@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:6924
update@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:19873
performUpdate@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:16761
_enqueueUpdate@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:16413
async*requestUpdateInternal@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:16203
initialize@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:14558
initialize@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:19159
J@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:12477
st@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:1:18570
ti@https://ha.pc-tips.se/hacsfiles/button-card/button-card.js?hacstag=146194325350:425:4854
C@https://ha.pc-tips.se/frontend_latest/app-qElYkN9pnTU.js:2:15285
t@https://ha.pc-tips.se/frontend_latest/app-qElYkN9pnTU.js:2:13196
r@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13574
7778/h/<@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14021
h@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14283
c@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13700
w@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13042
value@https://ha.pc-tips.se/frontend_latest/14845-z6XHJpNe91U.js:14:41899
99476/</h</value/this._cards<@https://ha.pc-tips.se/frontend_latest/14845-z6XHJpNe91U.js:14:40942
value@https://ha.pc-tips.se/frontend_latest/14845-z6XHJpNe91U.js:14:40929
r@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13600
7778/h/<@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14543
h@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14717
c@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13700
w@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13042
value@https://ha.pc-tips.se/frontend_latest/14845-z6XHJpNe91U.js:14:41899
99476/</h</value/this._cards<@https://ha.pc-tips.se/frontend_latest/14845-z6XHJpNe91U.js:14:40942
value@https://ha.pc-tips.se/frontend_latest/14845-z6XHJpNe91U.js:14:40929
7778/h/<@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14664
promise callback*7778/h/<@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14621
h@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:14717
c@https://ha.pc-tips.se/frontend_latest/51643-zawwp4VdWuM.js:1:13700

Additional information:

The cards in the gif has the following code:

    - type: "custom:button-card"
      template: "card_welcome_bs"

    - type: custom:stack-in-card
      mode: vertical
      keep:
        margin: true
        outer_padding: true
        box_shadow: true
        border_radius: true
      cards:

        - type: horizontal-stack
          cards:     
          - type: "custom:button-card"
            color_type: blank-card
          - type: "custom:button-card"
            template: "chip_weather_date"
            entity: weather.smhi_home
            variables:
              ulm_weather: weather.smhi_home
            card_mod:
              style: |
                ha-card {
                  margin-top:  10px;
                  }
                }
            styles:
              card:
                - --keep-background: 'false'

          - type: "custom:button-card"
            color_type: blank-card

        - type: horizontal-stack
          cards:
            - type: custom:button-card
              template: custom_card_paddy_welcome
              variables:
                ulm_custom_card_paddy_welcome_time: sensor.time
              card_mod:
              style: |
                ha-card {
                --card-background-color: none;
                }
            - type: "custom:button-card"
              template: chip_navigate
              label: Test
              variables:
                ulm_chip_navigate_path: /config/dashboard/
                ulm_chip_navigate_icon: mdi:cog-outline
              card_mod:
              style: |
                ha-card {
                  margin-top:  20px;
                  margin-right:  20px;
                  border-radius: 150px;
                  }
                }
              styles:
                card:
                  - --keep-background: 'true'
        - type: horizontal-stack
          cards:
            - type: "custom:button-card"
              template: "card_scenes_welcome"
              variables:
                entity_1:
                  entity_id: light.alla_lampor
                  icon: "mdi:lamps"
                  name: "Lampor" #OPTIONAL
                  color: "blue"
                entity_2:
                  entity_id: script.spela_spotify
                  icon: "mdi:music-box"
                  name: "Mys" #OPTIONAL
                  color: "red"
                entity_3:
                  entity_id: script.qr_wifi_gast
                  icon: "mdi:wifi"
                  name: "Gäst" #OPTIONAL
                  color: "green"
                entity_4:
                  entity_id: script.stang_av_allt
                  icon: "mdi:power"
                  name: "Stäng av" #OPTIONAL
                  color: "purple"
                entity_5:
                  entity_id: script.godnatt
                  icon: "mdi:sleep"
                  name: "Godnatt" #OPTIONAL
                  color: "yellow"
              card_mod:
              style: |
                ha-card {
                --card-background-color: none;
                }```
theepicsaxguy commented 1 year ago

Updated with more information regarding this issue.

conorlap commented 11 months ago

+1 on this