Read-More not working with Bricksforge Pro Forms Multi-Step

Hi support,
there seams to be a problem with Bricksable «Read More (Expand)»-Element combined with Bricksforge Pro Forms https://docs.bricksforge.io/en/elements/pro-forms/#step.
In the first step (visible) it works fine.
But in the following steps (not visible after loading -> only step by step when clicking «Next»), the «Read More (Expand)» Element collaps to 0px instead of unfold to full-size content-height.

I guess it is happens because of the element-settings of the parent-element (step-wrapper):

• bricks-lazy-hidden
• style=”display: none;”

<div id="brxe-idnpjx" class="brxe-div bricks-lazy-hidden" data-brf-step="3" data-original-display="flex" data-visible="false" style="display: none;">

## Before Click:
The Element looks this before clicking on read-more Button

<div id="brxe-koxvlj" data-script-id="koxvlj" class="brxe-ba-read-more" data-ba-bricks-read-more-options="{&quot;speed&quot;:400,&quot;collapsedHeight&quot;:130,&quot;heightMargin&quot;:16,&quot;moreLink&quot;:&quot;Leitfaden lesen&quot;,&quot;lessText&quot;:&quot;Zuklappen&quot;,&quot;startOpen&quot;:false,&quot;scrollBacktoTop&quot;:false,&quot;scrollBacktoTopTarget&quot;:&quot;element&quot;,&quot;scrollBacktoTopCssId&quot;:&quot;&quot;,&quot;readMoreIcon&quot;:&quot;ion-ios-arrow-down&quot;,&quot;readMoreIconSVG&quot;:&quot;&quot;,&quot;lessIcon&quot;:&quot;ion-ios-arrow-up&quot;,&quot;lessIconSVG&quot;:&quot;&quot;}">...</div>

The child element:

<div class="ba-read-more-wrapper ba-read-me-gradient rmjs-3" style="height: 130px; max-height: none;" data-readmore="" aria-expanded="false" id="rmjs-4">...</div>

## And after click:
The Element looks this after clicking on read-more Button (SAME)

<div id="brxe-koxvlj" data-script-id="koxvlj" class="brxe-ba-read-more" data-ba-bricks-read-more-options="{&quot;speed&quot;:400,&quot;collapsedHeight&quot;:130,&quot;heightMargin&quot;:16,&quot;moreLink&quot;:&quot;Leitfaden lesen&quot;,&quot;lessText&quot;:&quot;Zuklappen&quot;,&quot;startOpen&quot;:false,&quot;scrollBacktoTop&quot;:false,&quot;scrollBacktoTopTarget&quot;:&quot;element&quot;,&quot;scrollBacktoTopCssId&quot;:&quot;&quot;,&quot;readMoreIcon&quot;:&quot;ion-ios-arrow-down&quot;,&quot;readMoreIconSVG&quot;:&quot;&quot;,&quot;lessIcon&quot;:&quot;ion-ios-arrow-up&quot;,&quot;lessIconSVG&quot;:&quot;&quot;}">...</div>

BUT The child element has inline-style changed to 0px:

<div class="ba-read-more-wrapper ba-read-me-gradient rmjs-3" style="height: 0px; max-height: none;" data-readmore="" aria-expanded="true" id="rmjs-4">...</div>

# My assumption

When I drag & drop the Element in the first Step (Visible by start) the same «Read More (Expansion»-Element is working fine.
So I guess it has to do something with the “invisible nature” of the steps following the first visible steps, which are invisible.

#Question

• Do you have some experiences with this unwanted behaviour?
• Do you know any kind of solution or work-around?
• Or is there some kind of «event» I coud trigger to “re-calc” the height of Element “.ba-read-more-wrapper” -> after click on Button «Next» (and changing to visible)?

• This topic was modified 1 year, 7 months ago by mad99.
• This topic was modified 1 year, 7 months ago by mad99.
• This topic was modified 1 year, 7 months ago by mad99.

The page I need help with: [log in to see the link]