Menubar-widget, changing icon size

[natpaa]

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?

ThingWorx 9.3.4

Thanks for help.

[Surya_Tiwari]

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

[natpaa]

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.

[Surya_Tiwari]

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

[DanZ · Accepted solution]

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.

[natpaa]

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