icon size limited on button widget without label

Forum|Forum|3 years ago
June 8, 2022
1 reply
3673 views

When creating a button with only an icon/ image displayed on it I find that the icon can only be enlarged to so far before it exceeds some allowable area.

With a blank label the icon, sized here to 100x100 pixels, becomes cropped.

With a label the icon is properly sized.

Is there a way to get image only buttons to have their icons properly sized without this cropping?

Best answer by Nate_145

The problem is solved! See https://www.ptc.com/en/support/article/CS420114

The following custom CSS should solve the issue of incorrectly formatted icon only buttons. Please adjust as appropriate for padding and allowable image size.

ptcs-button[mode="icon"]::part(root) {
padding: 10px;
max-width: 100px;
max-height: 100px;
}

A

abjain

15-Moonstone

@Nate_145 : Please try with https://www.ptc.com/en/support/article/CS328540

While using this, you need to define a custom class 'mycustomclass' on the button and use the below CSS instead of the one mentioned in article.

.mycustomclass ptcs-button {
ptcs-button-icon--dim: 70px !important;
height: 100px !important;
width: 100px !important;
max-height: 100px !important;
max-width: 100px !important;
min-height: 20px !important;
min-width: 20px !important;
background-color: transparent !important;
border: none !important;
padding: 20px !important;
}

N

Nate_145

Author

10-Marble

This solution did work in Thingworx 8.5, but is not functioning fully on Thingworx 9.2.

Applying the custom class raw without any other changes results in the button formatting but the icon remains small. The blue border is from the focus style, activated here to show the button size.