List Widget CSS customization not working

[kthangapandy]

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. 

[TonyZhang]

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

[kthangapandy]

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]

[kthangapandy]

Attached snapshot

[TonyZhang]

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

[kthangapandy]

Hi, 

The Thingworx Version is 9.1.3-b593.

Please find attached entities

[TonyZhang]

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.

[TonyZhang · Accepted solution]

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.

[TonyZhang]

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