Flexbox control hide/show is breaking the display:flex

1

Hello,

I have a form with a couple FlexBox containers inside of it that are hidden/shown as the app logic is followed. I’m simply using Flexbox1.hide() and Flexbox1.show() in my code to do this, but when showing the Flexbox back, all the flex align configuration are lost. It seems by inspecting the generated HTML code that the original Flexbox1 style is not being preserved between the calls to the hide/show() methods:

ORIGINAL HTML TAG:
div id=“Flexbox1” class=“rounded-lg” style=“align-content:center; align-items:center; flex-direction:column; flex-wrap:wrap; justify-content:space-around; font-family:inherit;background-color:yellow; border-width:2px; border-style:double; border-color:#E0E0E0; border-radius:10px;”

CHANGED HTML TAG: (after hide/show())
div id=“Flexbox1” class=“rounded-lg” style=“place-content: center space-around; align-items: center; flex-flow: column wrap; font-family: inherit; background-color: yellow; border-width: 2px; border-style: double; border-color: rgb(224, 224, 224); border-radius: 10px; display: block;”

Of course I can workaround this puting the FlexBox inside of a regular (non-Flex) container and hide it instead of the FlexBox, but I’ll be doubling controls and this would not be an optimal solution.

Has anyone seen this also?

Thanks
Ricardo

2

Try using the flexbox1.style.display = “none” and = “” to hide and show the container.

1 Like
3

Thanks, Gary!

I’m getting back from old AppStudio 6.x times and my old code wouldn’t open in 8.x. I recall there was a attribute setting to do so (instead of a method) and you pointed directly to it.

Works like a charm!

4

I believe their is a post where I asked the same question last fall.

5

Yeah, sorry about that. I did try a search but it came empty.