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

Community Tip - Need help navigating or using the PTC Community? Contact the community team. X

icon size limited on button widget without label

Nate_145
7-Bedrock

icon size limited on button widget without label

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. 

NS_YSmartLab_1-1654714821364.png

With a label the icon is properly sized.

NS_YSmartLab_2-1654714917764.png

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

6 REPLIES 6
abjain
13-Aquamarine
(To:Nate_145)

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

Nate_145
7-Bedrock
(To:abjain)

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.

NS_YSmartLab_1-1655308100996.png

 

I have attempted this solution with manual changing of the icon size in the Style Properties and the icon still becomes cropped.

NS_YSmartLab_0-1655307944345.png

FD_9792724
5-Regular Member
(To:Nate_145)

Hi, 

Did you find a solution about this?

 

 

Unfortunately not. I have tried to dig a bit deeper and I believe I have found the properties that need altering. peeking under the hood it seems that the element needing altering is under the shadow dom, specifically the max-height and max-width properties as seen in the before and after below which changes the default 34x34px region to accommodate the 200x200px icon.

 

NS_YSmartLab_2-1659534300857.png     NS_YSmartLab_4-1659535051708.png

 

I have not found the correct syntax to correctly access the class via the custom CSS tab of the mashup composer. Following several of my own attempts, I attempted to follow the syntax shown in this thread:

https://community.ptc.com/t5/ThingWorx-Developers/Apply-CSS-On-Hover-to-Shadow-Dom-Element/td-p/731566

but was unsuccessful with the following code.

 

.widget-ptcsbutton:([mode="icon"])::part(root) {
max-height: 200px;
max-width: 200px;
}

FD_9792724
5-Regular Member
(To:Nate_145)

Thanks for your answer

TomerH
7-Bedrock
(To:Nate_145)

Hi,

i use button as custom class, Try

.button {
position: absolute !important;
}

.button .widget-ptcsbutton {
background-color: transparent !important;
border: none !important;
}

.button .widget-ptcsbutton::part(root) {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}

.button .widget-ptcsbutton::part(icon) {
width: 100%;
height: 100%;
}

Top Tags