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

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Menubar-widget, changing icon size

natpaa
8-Gravel

Menubar-widget, changing icon size

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.

 

ACCEPTED SOLUTION

Accepted Solutions
DanZ
15-Moonstone
(To:natpaa)

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.

View solution in original post

5 REPLIES 5

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

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.

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

DanZ
15-Moonstone
(To:natpaa)

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
8-Gravel
(To:DanZ)

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

 

Announcements


Top Tags