cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - If community subscription notifications are filling up your inbox you can set up a daily digest and get all your notifications in a single email. X

Extension widget: css breaks when loads native list widget

FredSilva92
5-Regular Member

Extension widget: css breaks when loads native list widget

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:

 
 

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
FredSilva92
5-Regular Member
(To:bmihaiciuc)

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

View solution in original post

5 REPLIES 5
FredSilva92
5-Regular Member
(To:FredSilva92)

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

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

date_picker_good.png

 

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

date_picker_bad.png

 

Looking forward for any answer
Thank you,
Frederico Silva

FredSilva92
5-Regular Member
(To:FredSilva92)

*not thingworx widget, i meant mashup

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
5-Regular Member
(To:bmihaiciuc)

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
23-Emerald II
(To:FredSilva92)

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

Top Tags