Data Table Widget Styling Breaks in Scoped App After Cloning

[bishalsharm]

Good Morning/Afternoon/Evening,

I’m reaching out to seek guidance regarding a UI issue encountered after cloning a global widget into a scoped application.

Context:
I’m using the OOB global widget “Data Table from Instance Definition” on a portal page to display records from a custom scoped table. After placing the widget, I was required to make two modifications:

1. Change the column header color.

2. Remove the New button to prevent end users from creating records via the portal.

To meet these requirements, I cloned the global widget into the scoped app. During this process, I also updated some server-side scripts to ensure compatibility within the scoped context.

Issue:
After cloning and updating the widget, the table's CSS broke. The list view in the scoped version renders incorrectly — the column headers and layout appear distorted (as shown in the attachment titled "Invalid Scoped App CSS"). However, the global widget still renders the table correctly (refer to the attachment "Valid Global App CSS").

It seems like the scoped app widget is not inheriting or applying the expected styles correctly. I’m looking for guidance on how to resolve this CSS issue so the scoped version mirrors the visual behavior of the global one.

Thanks in advance for your help!

Best regards,
Bishal

[Mark Manders]

Since you created something custom, you need to share what you created, otherwise we are just looking at an image, without knowing where it is coming from.

I have seen widgets break after copying them, even within the same scope, simply because the original widget is utilizing stuff that isn't even visible to us. And when you do it in a different scope, that can break even more, because your scope probably doesn't have access to the same config/code the original does.

[bishalsharm]

Hi @Mark Manders 

sorry for late response on your note:

somehow i managed to fix the height css but looks like it still needs some corrections.

I have cloned OOB page called List & Form and the cloned page is now called AG List & Form (scoped app).

since you know that this page has two columns: column1 is having a widget called AG Data Table from URL Definition (scoped app) which is again cloned from OOB Data Table from URL Definition  widget and column 2 has another widget called AG Form (scoped app) which again cloned from OOB widget called Form.

The problem is i see the header and footer is not syncing with the column1 header and footer, I mean they are not in same horizontal line, in column 2 the header and footer sometimes stretched and sometimes shrinks (PFA). please see the highlighted area with cirlce.