Skip to content

Elements not initially in the right spot #58

@theepicsaxguy

Description

@theepicsaxguy

Checklist:

  • I updated to the latest version available
  • I cleared the cache of my browser

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;
                }```



Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions