Read-More broken (max-height is not set to none after resize)

Hi Bricksable-Support-Team,
When a page is dynamic-changing the size, your JS-Script is not “re-overload” the ?max-height: none;?-Part.
So this bug will fix the read-more-Element to the colapsed-height, regardless of whether or how often a visitor clicks on the Expand button afterwards.
Seams to be your script frontend-min.js from element read-more has not the needed declaration of max-height:none; for the resize()-EventTrigger:

window.addEventListener("resize",function(o){setTimeout(()=>{window.matchMedia("(max-width: "+t.tablet_portrait+"px)").matches&&e.querySelector(".ba-read-more-wrapper").setAttribute("style","height:"+n+"px"),window.matchMedia("(max-width: "+t.mobile_landscape+"px)").matches&&e.querySelector(".ba-read-more-wrapper").setAttribute("style","height:"+a+"px"),window.matchMedia("(max-width: "+t.mobile_portrait+"px)").matches&&e.querySelector(".ba-read-more-wrapper").setAttribute("style","height:"+i+"px")},100)})}},c=e.querySelector(".ba-read-more-wrapper"),d=new Readmore(c,l);n=setInterval(function(){clearInterval(n),new BricksIntersect({element:c,callback:function(e){c&&(window.bricksableReadMoreData.ReadMoreInstances[o]&&window.bricksableReadMoreData.ReadMoreInstances[o].destroy(),window.bricksableReadMoreData.ReadMoreInstances[o]=d)}})},100)}});function bricksableReadMore(){bricksableReadMoreFn.run()}document.addEventListener("DOMContentLoaded",function(e){bricksIsFrontend&&bricksableReadMore()});

Without the “overload” of the max-height also after resize()-Trigger, the Element is fixed to the defined colapsedHeight.
I guess the end of the Code should be:

window.addEventListener("resize",function(o){setTimeout(()=>{window.matchMedia("(max-width: "+t.tablet_portrait+"px)").matches&&e.querySelector(".ba-read-more-wrapper").setAttribute("style","height:"+n+"px;max-height:none;"),window.matchMedia("(max-width: "+t.mobile_landscape+"px)").matches&&e.querySelector(".ba-read-more-wrapper").setAttribute("style","height:"+a+"px;max-height:none;"),window.matchMedia("(max-width: "+t.mobile_portrait+"px)").matches&&e.querySelector(".ba-read-more-wrapper").setAttribute("style","height:"+i+"px;max-height:none;")},100)})}},c=e.querySelector(".ba-read-more-wrapper"),d=new Readmore(c,l);n=setInterval(function(){clearInterval(n),new BricksIntersect({element:c,callback:function(e){c&&(window.bricksableReadMoreData.ReadMoreInstances[o]&&window.bricksableReadMoreData.ReadMoreInstances[o].destroy(),window.bricksableReadMoreData.ReadMoreInstances[o]=d)}})},100)}});function bricksableReadMore(){bricksableReadMoreFn.run()}document.addEventListener("DOMContentLoaded",function(e){bricksIsFrontend&&bricksableReadMore()});

Hope you can fix the bug in the next revision.

Unfortunatelly this resize-function has also other side-effects.

When a page have elements who are floating in, it seams the page-resize()-event ist triggering. At least your event-trigger is fireing while scrolling a lot, when elements are floating in. Because of this resize-function everytime each element of read-more-Element is doing some strange stuff.
Without the “re-overload” which I suggested above, all the read-more elements are FIXED to colapsed height.

But also with the suggested code, the read-more-Elements are colapsed while scrolling in mobile devices.
For what is this resize()-Event-Trigger for?
Maybe there would be an other solution for your aim with this resize()-trigger?
(Currently I load an custom frontend-min.js without your resize()-Event-function)
Best regards
Martin

• This topic was modified 1 month, 4 weeks ago by mad99.
• This topic was modified 1 month, 4 weeks ago by mad99.
• This topic was modified 1 month, 4 weeks ago by mad99.