Stack Component Bug in Preview and Play Mode

Hi guys,

I am creating a dashboard header with stacks and I found out a stack bug when go to preview or play modes. All the components inside of the rigth stack gets with the fixed width even though I set them in auto mode.

Preview and Play Modes

As you guys can see, as soon as I press the preview or play button the right stack gets like this.

Does anyone knows what's happening?

@Darren @AbbeyHernandez @Tess any thoughts on this?

Hey @Almopt - I'm not immediately able to replicate this on my end. Do you have a JSON export that you can share? And I can't remember if you're on a cloud or self-hosted instance.!

Hi @Darren ,

Sure I'll send you in private.

Hi @MiguelOrtiz , any thoughts on this?
Sorry for tag you once again :smiley:

Quick update here, @Almopt! After doing some investigation, this is pretty clearly a bug. That said, I'm having a bit of an issue narrowing down the root cause, which is also making it hard to come up with a reliable workaround.

I know you mentioned that this issue was potentially impacting some time-sensitive development projects - are you potentially able to use the page2 JSON I sent you as a template?

Hi @Darren ,

The only workaround I found was to change many times the parent containers from stack to grid and after changing multiple times, stop the bug. I think the bug is in nested stack containers.

1 Like

Hi, I'm experiencing the same bug here since last week, it seems that the width configuration isn't saved anymore.

I had a previously created stack container, with three childs (one with width fill, the two others with width auto) The container displays as expected, but since last week, if I add an element in it, the width will ends up to "fixed" and the element won't appear in UI after reload

@Almopt, @Darren I don't think this is related to nested stack containers, because I was able to reproduce it in a module with a single container stack level

Steps to reproduce:
-Create a module,
-Add a container (I remove header add on, and margins/paddings/border show)
-Set container to Stack
-Add a text with width "fill"
-Add a Button with width "auto"
-Reload the page to see if changes are saved
-After reload, child widths are set to fixed with minimal width possible (like if they are set to width fixed 0)

Adding some screenshots:

Initial configuration:




expected render:

after page reload to check:

Digging into configuration, width weren't saved and ends up to fixed 0


1 Like

Thanks for putting in the effort to help debug this, @Thibault_Cabanes! Welcome to the community. :slightly_smiling_face:

I've documented this pretty thoroughly at this point and have alerted the team. Given the fact that it's an emergent issue, I think that it should be picked up relatively quickly. I'll update everybody here as soon as I have news!

2 Likes

Hi @Darren do you have any feedback on this?

Nothing yet! A lot of our engineering resources are currently going towards cutting the Q4 stable release, but I'll keep you updated here. I did find that repeatedly toggling between Stack and Grid mode did eventually force the container into the correct state, but recognize that it's not an ideal workaround. :sweat_smile:

2 Likes

Hey @Almopt - we have a fix for this that should go live in the next couple of weeks! I'll let you know which specific version to look out for when the fix gets merged into staging. :+1:

Just to close the loop on this particular issue, our fix went live with cloud version 3.120! Don't hesitate to let us know if you notice any additional issues. :+1: