Skip to main content
N
natpaa8-Gravel
8-Gravel
February 23, 2024
Solved

Menubar-widget, changing icon size

  • February 23, 2024
  • 2 replies
  • 1860 views

Hello devs,

 

What would be the easiest way to change the icon size in the standard ptc-menubar widget in Thingworx? I couldn't find it in the list of configurable properties/style properties of the widget, and didn't have luck with changing it with css. The default size is very small, making the icons somewhat unreadable.

 

I tested three different css lines like following, but couldn't even get these to appear in the browser dev tools. If i go manually to the icon element in the dev tools and set width/height to desired values it works and looks nice, but can't get it to be part of mashup configuration.

 

 

ptcs-menubar::part(root)::part(main-area)::part(items-area)::part(item)::part(icon) {
 height: 3em;
 width: 3em;
}
@supports (ptcs-style-unit: "PTCS-MENUBAR") {
 [part="icon"] {
 height: 3em;
 width: 3em;
 }
}
@supports (ptcs-style-unit: "PTCS-ACCORDION") {
 [part="icon"] {
 height: 3em;
 width: 3em;
 }
}

 

 

I even noticed that there is support for this in the web component API for ptcs-menubar (https://support.ptc.com/help/thingworx_hc/visual_sdk/Web_Components/ptcs-menubar/), but seems like it's not implemented in the widget itself?

natpaa_0-1708700054181.png

 

ThingWorx 9.3.4

 

Thanks for help.

 

Best answer by DanZ

I had the same problem and your snippets pointed in the right direction. The following solution works for me (TWX 9.3.8):

 

@supports (ptcs-style-unit: "PTCS-MENU-ITEM.light") {
 [part="icon"] {
 height: 24px;
 width: 24px;
 }
}
@supports (ptcs-style-unit: "PTCS-MENU-ITEM.dark") {
 [part="icon"] {
 height: 24px;
 width: 24px;
 }
}

But I am not sure where the differentiation between "dark" and "light" happens.

2 replies

S
Surya_Tiwari16-Pearl
16-Pearl
February 24, 2024

Hi @natpaa 

 

 I tried this at my end and found the below CSS to be working for increasing the icon size in mashup.
.mycustomclass ptcs-button {
ptcs-button-icon--dim: 100px !important;
height: 100px !important;
width: 100% !important;
max-height: 100% !important;
max-width: 100% !important;
min-height: 20% !important;
min-width: 20% !important;
background-color: transparent !important;
border: none !important;
padding: 20% !important;
}
.mycustomclass .widget-ptcsbutton::part(icon){
width: 90px;
height: 90px;
}

After this, You would also need to change the max width and height for icon in the style properties section.
[cid:image001.jpg@01D67AC4.0A0AFFC0]
Below you can see the CSS structure of reaching till icon.
[cid:image002.jpg@01D67AC4.0A0AFFC0]
Please try the above and you should be able to change the icon size

N
natpaa8-GravelAuthor
8-Gravel
February 29, 2024

Hi @Surya_Tiwari 

 

Unfortunately I didn't get it working with the css you provided. The problem is with ptc-menubar widget, not with a ptcs-button widget. The icon size in the menu should grow.

S
Surya_Tiwari16-Pearl
16-Pearl
March 1, 2024

Hi, @natpaa   kindly create a case with the PTC support team, and we will analyze it.

D
DanZ15-MoonstoneAnswer
15-Moonstone
March 11, 2024

I had the same problem and your snippets pointed in the right direction. The following solution works for me (TWX 9.3.8):

 

@supports (ptcs-style-unit: "PTCS-MENU-ITEM.light") {
 [part="icon"] {
 height: 24px;
 width: 24px;
 }
}
@supports (ptcs-style-unit: "PTCS-MENU-ITEM.dark") {
 [part="icon"] {
 height: 24px;
 width: 24px;
 }
}

But I am not sure where the differentiation between "dark" and "light" happens.

    N
    natpaa8-GravelAuthor
    8-Gravel
    March 12, 2024

    Thank you @DanZ, that works!

    I also noticed that if you change the menu type to "nested accordion", you need following snippet to change menu icon size:

    @supports (ptcs-style-unit: "PTCS-ACCORDION-ITEM.menu") {
 [part="icon"] {
 height: 36px;
 width: 36px;
 }
}

     

      Terms & ConditionsCookie settingsAccessibility statement