[Reactive App] List widget prepends/appends empty script tags, carousel issues

Working on a Reactive Web App. I've found that any list widget I add creates empty <script> tags before and after the list content, as seen below

Then, when a list is used inside the carousel widget, these empty script tags result in empty carousel items. Looking at the source for the carousel widget, it checks for the existence of a list, then it selects ALL CHILDREN of that list, with no filtering for these script tags

I see no options for filtering, and now settings on the list itself to not create these empty script tags (disabling animations, setting type to custom, removing the list list-group classes).

I find it hard to believe nobody else has used list widget in carousel in reactive apps, yet I was not able to find any forum post about this...any ideas? I was going to just duplicate the carousel widget and modify the source to filter out script tags, as we have had to do similar for other widgets, but I wanted to check the forums first before doing that.

In short: List widget creates empty script tags, carousel widget detects these and renders them as empty carousel items.

Solution

Hi Alexander,

Thank you for reporting that. We'll be fixing that in the carousel widget. In the meantime another workaround is to disable list virtualization in the list (the script tag is only there to add fake vertical spacing, when virtualizing elements and only showing the ones in the viewport):

Cheers,
Tiago Simões

As a follow up, I ended up creating a duplicate of the widget, then modifying the source code to only select DIV and SPAN tags, filtering out these empty script tags. To be more extensible I could add an input parameter of comma separated tag names to include, but for my needs hard coding in DIV and SPAN works for now. 

I am still wondering about these empty script tags, as they may cause issues later on, and would like to know more about them, why there are generated and if theres any setting that effects them (animations, styles etc)

Solution

Hi Alexander,

Thank you for reporting that. We'll be fixing that in the carousel widget. In the meantime another workaround is to disable list virtualization in the list (the script tag is only there to add fake vertical spacing, when virtualizing elements and only showing the ones in the viewport):

Cheers,
Tiago Simões

Hi Team

Thank you for posting this out here! Saved loads of time!

Thank you for the work around. We also noticed the similar issue within Adaptive\Gallery

This is also happening for Accordion Items.

In my case, for some reason, when i had 2 and only 2 elements in my list, it would add those Script tags horizontaly instead of vertically, which would then mess up the CSS aligning the items.

Thanks for the solution. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.