I must have missed or forgotten how to keep my view set to a specific size in perspective. When I click in the text field it zooms and then doesn’t zoom out until I do a “finger pinch” on the screen… Looking to keep the view anchored or relatively anchored so that it never has part “off screen” that I have to move and re-find.
Can someone please point me to the thread/manual notation that discusses it?
Is your VIEW zooming, or is it the TEXT FIELD? What Container type (Coordinate/Flex/Column)? Is it only at certain resolutions? Could you paste the offending View’s JSON here?
Logon.JSON (8.6 KB)
It seems like I missed “anchoring the corners”… the bar at the top ends up missing or can be “scrolled” away from even though there is nothing else to scroll to… I seem to remember reading something about this, but I can’t recall where.
From the look of it, you’ve defined a width for your “HeaderLabel” Label, and that width is wider than the containing View. No matter where you place the Label, it will now have content outside the boundaries of your View. Reduce the width of that Label, set the POSITION.x and POSITION.y to both be 0, and everything seems fine.
Hmm… still zooms when the text field is entered, then doesn’t always zoom out all the way when done…
Are you using a mobile device, or a desktop browser?
I tried Chrome, Firefox, an iPhone and an iPad, and none of those devices zoomed when I entered the Text Field.
using an 6th gen iPod touch with iOS version 12.1
Ah, I was finally able to replicate what you’re seeing.
I had to make your View thin enough that it would fully render in the viewport before I could see the zooming taking place because the original size of the View resulted in the View being partially zoomed by default. I’ll look into opening a new ticket for this.
We never declared this issue as being fixed. The internal ticket is still in our selection pool, awaiting a developer.
yep, just an update for you from my side
@brian.mills It sounds like we’re not going to fix this one because it’s how iOS handles inputs which have a font size of <16px. We would have to write special logic for every input to determine if the environment is iOS, and then determine what zoom level to return to when the user is done.
The recommended workaround is to modify props.style.fontSize for any input components you don’t want this behavior for to be >=16px. This might be better anyway, as smaller fonts on mobile devices aren’t so great.
Hey @cmallonee,
I am on 8.0.14 and far as I can tell, this fix no longer works anymore. It seems like the font size changes but the input will still zoom in on iOS devices.
Is there a different way to workaround this in newer versions of Perspective?
Edit: I spoke too soon. On the Dropdown component with search enabled i needed this code snippet in my .css file
.ia_dropdown__search {
font-size: 16px;
}
@cmallonee , Is this the same bug that I have been running into?
iOS device, XY Chart with a legend.
Font size on every possible style is 16px +
But when I click to disable a pen in the legend or click to see a value on the chart, it zooms in and never zooms back out, i have to manually zoom out.
I am experiencing the same issue
have you come up with a solution? this only happens on iOS systems?
Bump on this bug. Inductive Automation - please fix this!
I know your hands are tied to some degree, but hopefully Apple has improved some of the APIs or something since 2019, I’ve never experienced this behavior using my iPhone before for any other website or application, why is this bug unique to Perspective?
The zooming occurs due to the "font-size" parameter in the css theme files.
Can be found in the folder:
"C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light\common"
They are defaulted to 0.875rem. You need to override that to 1rem. In this case, for input fields, you will see this as default in the "input-field.css" file:
.ia_inputField {
font-size: 0.875rem;
}
If adjusted at the source, I believe this can be overwritten when upgrading or other circumstances, so it's recommended to create an override css file and put the following in there:
.ia_inputField {
font-size: 1rem;
}
Or you can inject this in the style > background > background image of the field itself:
} .ia_inputField {font-size: 1rem;} {
Thank you for this post. I've been frustrated with this functionality since we installed perspective. What a relief it is to apply this solution!