Extension widget: css breaks when loads native list widget

[FredSilva92]

Hello everyone,

I've developed a extension widget in typescript, using the template below from github:
https://github.com/ptc-iot-sharing/ThingworxDemoWebpackWidget

When i add this widget to a mashup alone, the widget works fine:

[FredSilva92]

Sorry, the rest of the topic body is missing on main message

When i add the widget to thingworx widget it works fine:

But if i add the native widget list, the css of my widget breaks:

Looking forward for any answer
Thank you,
Frederico Silva

[FredSilva92]

*not thingworx widget, i meant mashup

[bmihaiciuc]

Some possible reasons for this are:

 - Your CSS is tied to either a specific widget ID or page structure which breaks when either of these changes due to adding other widgets

 - The two widgets both use conflicting rules and yours get overwritten

 - The two widgets both use conflicting versions of the same library

 - Some other kind of issue, such as an error being thrown before your CSS is imported

The easiest way to look into this is to inspect your widget using the browser in both configurations. The inspector will give you a detailed breakdown of which CSS rules are applied to your elements and which win out when there are multiple conflicting rules. Inspecting both states should let you know what is changing between the two mashups and where those changes are coming from.

[FredSilva92 · Accepted solution]

Hi bmihaiciuc,

Thanks for your reply.
I've alreadt solved the problem, creating a shadow Dom where i put my widget elements.

Thanks,
Frederico Silva

[slangley]

Hi @FredSilva92.

Since you have resolved your issue, please mark your last post as the Accepted Solution for the benefit of others on the community.

Regards.

--Sharon