Skip to main content
K
kthangapandy1-Visitor
1-Visitor
July 4, 2021
Solved

List Widget CSS customization not working

  • July 4, 2021
  • 2 replies
  • 2882 views

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. 

Best answer by TonyZhang

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.

2 replies

T
TonyZhang16-Pearl
16-Pearl
July 5, 2021

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;
}

K
kthangapandy1-VisitorAuthor
1-Visitor
July 5, 2021
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]


K
kthangapandy1-VisitorAuthor
1-Visitor
July 5, 2021

Attached snapshot

T
TonyZhang16-Pearl
16-Pearl
July 5, 2021

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

K
kthangapandy1-VisitorAuthor
1-Visitor
July 5, 2021

Hi, 

 

The Thingworx Version is 9.1.3-b593.

 

Please find attached entities

T
TonyZhang16-Pearl
16-Pearl
July 6, 2021

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.

 

Terms & ConditionsCookie settingsAccessibility statement