Deploy report datapage with modal in Weebly - CSS/Java conflict

[Corpcatalog]

I have a report datpage deployed in a weebly site that is 100% width with vertical scroll using the Green std style

I recenlty added some modal popups to allow editing of records inline with a popup

However now that i added the modal code to the page header/footer and HTML block, my report datapage does not display correctly

The report is no longer 100% width, is not responsive and does not scroll.

The report and modal works perfectly in preview mode inside caspio and also the report datapage works without the modal code inbedded in the weebly page

 

 

 

 

[Corpcatalog]

anybody can help me with Weebly and Modal?

[GoodBoy]

Hello! Can you please try inserting this script in your DataPage footer and check if the width will go back to 100%?

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
document.querySelector(".cbResultSetTable").style.width = "100%"
});
</script>

 

[Corpcatalog]

Hi Goodboy 

 

I tried adding this to the footer of the datapage which did not change anything I also tried the header of the datapage and also the header and footer of the weebly page 

I still have the same problem, tab report datapage is not full width and wont scroll down,  it keeps jumping back to the top

 

 

[autonumber]

Hi @Corpcatalog - since you have mentioned that it works as expected when you preview it in Caspio, it seems that the code for the modal is conflicting with the code on your website and causing the report's width to not be 100%. Would you mind sending the URL to your website to inspect it directly and perhaps apply some CSS code that will overwrite the code of your website?