Escape double quotes properly to display element correctly in Design View

Wappler General Bugs
#1

I am using an custom bootstrap theme in which a carousel element exists for which options can be set this way:

<div class="tns-carousel-inner" data-carousel-options="{&quot;items&quot; : 1, &quot;controls&quot; : false, &quot;nav&quot; : true}">

It renders fine in a real browser preview, but the carousel content is hidden in Wappler’s Design View.

I am sure it’s because of the double double quotes which I can’t (properly) escape, I eliminated all other possible reasons why it wouldn’t display.

Is this something Wappler’s internal browser (Design View) is not capable of showing properly or should I modify this line of code to make it work in the Design View as well?

There are no syntax error codes in the code editor shown btw and replacing &quot; and/or the "{ by '{ doesn’t work either. The latter change results in an error noticing that the data-carousel-options has to be wrapped in double quotes.

This project is on NodeJS btw.

Thanks for any help in advance.

#2
#3

Any news on this @patrick? Do you think it’s a bug indeed or is there a proper way to escape the double quotes? Thanks for any help in advance!

#4

Can you tell me what carousel component is being used. Does the carousel require some custom JavaScript, it is possible that it has some conflict in Design View.

#5

I checked all that and all dependencies are properly loaded, except 2 which are loaded by the element JS (it’s a custom bootstrap theme). Everything is loaded properly in chrome, but not in the Wappler browser (Design View). I’m quite sure it’s because there’s no way to pass all carousel setting values since it uses double quotes (data-carousel-options="{&quot;items&quot; : 1, &quot;controls&quot; : false, &quot;nav&quot; : true}">). I tried many ways to escape this and in the end just replaced the carousel by Wappler’s Swiper element.

#6

I don’t know the carousel component you’re using, but when it works in the browser and not in design view it probably is a JavaScript conflict. I don’t think the escaping is an issue, we do nothing with the custom attributes of third-party components.

#7

Okay, so nothing to do about it then? I can’t find any report or notification of the JS conflict. I am using the swiper now anyways instead, so the problem is kind of solved for me, but if it’s useful to you please let me know if you need more info.