Hi all,
Does anyone know how to make the Perspective Analog Indicator pointer stay the same size when changing the height of the component? By default it gets squished or expands too much, which looks bad.
I have received requests from my users to fix this. We would like the pointer to stay the same size regardless of the height of the component.
- Ignition version: 8.1.31
- Perspective module version: 2.1.31
- Browser: Google chrome version 146.0.7680.165
Problem when the component height is small (squished):
Problem when the component height is large (stretched):
Desired outcome - pointer stays roughly this size and shape regardless of component height:
I’ve tried applying a CSS style like so:
.psc-FixedPointer .ia_movingAnalogIndicatorComponent__wedgeIndicator {
width: 10px !important; /* Adjust size as needed */
height: 10px !important; /* Adjust size as needed */
/* Maintain relative positioning */
transform: translate(-50%, -50%);
}
and referencing it on the component like so:
Opening in a browser shows that the width and height parts of the CSS style are being applied, however the width and height specified (10x10) are not being implemented on the element. Instead it has a different width and height of unknown origin.
Looking under the Properties tab it seems like the height and width might instead be getting set by something called SVGAnimatedLength instead, which incorporates both a ‘baseVal’ and an ‘animVal’.
Presumably this is defined in the SVG object somehow and is not being overridden by the CSS styles, even though the ‘!important’ flag has been used.
At this point I’m beyond my expertise and would appreciate any tips. I imagine this is a not uncommon irk with this component so a solution would be appreciated by many.
Regards,
Angus