Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Elements not initially in the right spot #58

Open
2 tasks done
theepicsaxguy opened this issue Jul 16, 2023 · 2 comments
Open
2 tasks done

Elements not initially in the right spot #58

theepicsaxguy opened this issue Jul 16, 2023 · 2 comments

Comments

@theepicsaxguy
Copy link

theepicsaxguy commented Jul 16, 2023 •
edited
Loading

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;
                }```
@theepicsaxguy
Copy link
Author

Updated with more information regarding this issue.

@conorlap
Copy link

conorlap commented Dec 7, 2023

+1 on this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@theepicsaxguy @conorlap