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

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

List Widget CSS customization not working

kthangapandy
3-Visitor

List Widget CSS customization not working

Hi,

 

I need to customize List widget to reduce list-item min-height to 20px and reduce padding around item-checkbox to 3px. 

 

I tried multiple attempts like one below to access the part(list-item) and part(item-checkbox). I could not find a solution. 

 

.widget-ptcslist::part(list-item) {
min-height: 20px;
}
.widget-ptcslist::part(list-item-item-checkbox) {
padding: 3px;
}

Any solutions would be helpful. 

1 ACCEPTED SOLUTION

Accepted Solutions

Hi

 

Upon confirmation, the same CSS code is working in Thingworx 9.2, so if you can upgrade your Thingworx to 9.2 should be able to make it work.

View solution in original post

8 REPLIES 8

Hi,

 

I think the first one you tried is working fine. Perhaps you didn't notice the effect because of the RowHeight property of the list widget?  Try changing the value of min-height to a value greater than RowHeight.

.widget-ptcslist::part(list-item) {
         min-height: 20px;
}

 

For applying padding around checkbox of the list item (after enabling MultiSelect property of the List widget) . 

Try below selectors to target the checkboxes.

.widget-ptcslist::part(item-checkbox) {
          padding: 30px;
}
.widget-ptcslist::part(item-checkbox)::part(root) {
          padding: 10px;
}
.widget-ptcslist::part(item-checkbox)::part(box) {
          margin-left: 7px;
}

Hi,



Thanks for your response. I have updated the row height property and applied the CSS modifying the padding. Still no changes could be observed. Please find attached image where the padding has been highlighted. I would like to have padding to be 3px all sides.



[cid:image001.png@01D77199.9A9797C0]


Attached snapshot

Could you please share the ThingWorx version info and export the entity for me to replicate the issue?

Hi, 

 

The Thingworx Version is 9.1.3-b593.

 

Please find attached entities

Thanks for sharing the version info and entities. I can see the same CSS is working on Thingworx 8.5 but not on Thingworx 9.0 onwards including 9.1.3.

The difference I found in the HTML structure is that in Thingworx 8.5, ptcs-list-item element is enclosed in <div part="list-items-container"> </div>

whereas in Thingworx 9.1.3, the ptcs-list-item element is enclosed in <ptcs-v-scroller part="list-items-container"> </ptcs-v-scroller>

The issue might have to do with the nature of custom element list-items-container and need further research on how to style the child elements of list-items-container.

 

Hi

 

Upon confirmation, the same CSS code is working in Thingworx 9.2, so if you can upgrade your Thingworx to 9.2 should be able to make it work.

BTW the "root" part doesn't exist under the checkbox in Thingworx 9.2.

Top Tags