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

Community Tip - Learn all about PTC Community Badges. Engage with PTC and see how many you can earn! X

Gauge widget: Custom style value display

JO_9930585
10-Marble

Gauge widget: Custom style value display

For a gauge widget there is a valueDisplayMode property that shows the value. I have set this to inside. The value is shown within a rect element as shown below. I was wondering if there is a way to make this bigger. I found the css to do so but it is within a Rect element that I cannot access in composer custom css. The reason is because there are multiple Rect elements with no identification associated on them at the same level as this one. Below is the element info in chrome tools. If I change the highlighted Rect height/width/x/y, this will work. The issue is that I cannot find a way to do this from composer. Alternatively, if there is another way to achieve this, that would probably be even better.

JO_9930585_0-1709568137916.png

 

JO_9930585_1-1709567656679.png

 

JO_9930585_2-1709567914351.png

 

 

3 REPLIES 3
Rocko
17-Peridot
(To:JO_9930585)

it's always the same number of rects, so could you use this selector? https://www.w3schools.com/cssref/sel_nth-of-type.php

 

This works, however, it will not work for my solution after trying it. The reason is because changing the height/width of the box affects the calculated x/y values and the rectangle is no longer centered on the text. I can set the x/y as well so the rectangle is in the correct spot, but if the user has a different resolution or screen size, the calculated x/y will get overwritten by my setting and be off. So, styling this on the element is not a viable solution. Is there anything I can do here? It seems like a simple need that others have probably run into before. Below shows the same css on different zoom settings in the browser.

JO_9930585_0-1709657603752.pngJO_9930585_1-1709657633626.png

JO_9930585_2-1709657696290.png

 

 

 

Rocko
17-Peridot
(To:JO_9930585)

If it was not planned as feature, I guess you're out of luck. You can

a) request this as a feature

b) try again with CSS

c) create your own widget (starting with a copy of this one)

d) test another widget implementation (check https://github.com/ptc-iot-sharing/WebDesignKit or https://github.com/ptc-iot-sharing/ThingworxDemoWebpackWidget and https://community.ptc.com/t5/ThingWorx-Developers/Progress-gauge-import-failed-in-Thingworx-9-1/m-p/728411#M52025)

Top Tags