Config elements are discarded when loading card

[evest]

I was trying out the styles configuration to add some more padding between the cards.

Adding:

type: custom:vertical-stack-in-card
styles:
 padding: 0.2em 
cards:
  ...

The preview works fine, it changes the padding as I add styles.

Save works, the padding is persisted.

When editing the card again, the styles config element is gone.

I think it might have something to do with this code:

vertical-stack-in-card/vertical-stack-in-card.js

Line 176 in a23a601

// Patch setConfig to remove non-VSIC config options.

[evest]

I edited the file locally, and changed from:

    // Patch setConfig to remove non-VSIC config options.
    const originalSetConfig = configElement.setConfig;
    configElement.setConfig = (config) =>
      originalSetConfig.call(configElement, {
        type: config.type,
        title: config.title,
        cards: config.cards || [],
      });

to:

    // Patch setConfig to remove non-VSIC config options.
    const originalSetConfig = configElement.setConfig;
    configElement.setConfig = (config) =>
      originalSetConfig.call(configElement, {
        type: config.type,
        title: config.title,
        styles: config.styles,
        cards: config.cards || [],
      });

This works for me.

[evest]

Sitting here looking at the code, is it really necessary to remove non-VSIC config options? With all the new stuff being added to Lovelace dashboards, it is likely that more stuff will be added that will be discarded by the card.

[evest]

This is a workaround to avoid the card from discarding non-recognized config elements during load. It fixes a lot of reported issues.

I've tried changing the original file but it seems to be cached, so I'm just creating a new one with the altered code.

1. Create a new file for the new code. I'm using the File editor add-on to do this, put it into the same folder: /homeassistant/www/community/vertical-stack-in-card/vertical-stack-in-card2.js

2. Add the following code to the new file and save it:
   https://gist.github.com/evest/81fc9334c827f8bd306ef02ee97d6cea

3. In your Lovelace dashboard, click the ellipses menu and select Manage resources

4. Add the following Javascript resource: /local/community/vertical-stack-in-card/vertical-stack-in-card2.js

5. Remove the original resource /hacsfiles/vertical-stack-in-card/vertical-stack-in-card.js

This should work until there is a permanent fix released (in which case you have to revert some of these changes.)

[hzonz]

Thanks! I have also been following this issue but hadn’t received timely updates from the original author.
After spending quite some time organizing and reworking the implementation, and with the assistance of ChatGPT, I have now completed a redo of the card and resolved the related issues.

You can check out the updated library here: Custom Stack Cards

[RobertoCravallo]

Unfortunately none of this helps with the "visibility" settings getting lost on edit.

[Liquidmasl]

this is still an issue, as are a bunch others.
Is this going to get fixed or should we move forward and find a different approach to this?

[Liquidmasl]

This issue has been fixed in the actively maintained fork: Liquidmasl/nested-lovelace-card.

The root cause was that the visual editor's setConfig patch only forwarded type, title, and cards to the hui-vertical-stack-card editor, silently stripping horizontal, styles, grid_options, visibility, and any other custom properties whenever you saved via the UI.

Fixed in commit 0962c93 — if you'd like to switch, install via HACS by adding the new repository as a custom repository.