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.
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)
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