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

Extension widget: css breaks when loads native list widget

SOLVED
Highlighted
Participant

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
Highlighted

Re: Extension wiget: css breaks when loads native list widget

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
Highlighted

Re: Extension widget: css breaks when loads native list widget

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

Highlighted

Re: Extension wiget: css breaks when loads native list widget

*not thingworx widget, i meant mashup

Highlighted

Re: Extension wiget: css breaks when loads native list widget

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.

Highlighted

Re: Extension wiget: css breaks when loads native list widget

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

Highlighted

Re: Extension wiget: css breaks when loads native list widget

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

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum!