Perspective - Numeric Input Value Component BUG?

[lasse]

Hi,

I recently upgraded to the latest Nightly, after upgrading from 8.0.11 Nightly.
I see now that the numeric input value component have changed when you click on it?

Two arrows (Up,Down) are now in addition to what is was before, is there any way to disable this?
I used this component in alot of templates, and this is now screwing everything up

EDIT: I see that on my mobile phone I dont get these arrows, only on desktop.
Using latest version of Chrome.

[jmorris]

Yep, those arrows are annoying, there should be a way to disable them

[cmallonee]

You can disable them in 8.0.13 and newer by using a custom property in your theme file.
https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

[lasse]

Theme file? Where can I find that? Can you provide an example if possible?

[dkylep]

This might help...

CSS pseudo-elements

It took me a little bit to figure out but it’s actually pretty simple. I just recently downloaded the 8.0.14 nightly (b2020051802) which has the theme updates so the css file structure is a little different. But same concept applies to earlier versions. Basically I created a new css file, lets call it “MyCSS.css” and placed it in the IA perspective themes folder C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes I put my @keyframes into th…

In the linked example I created a 'MyCSS.css' file that is imported into the theme I'm using. If you add

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  padding: 0px 0px;
  margin: 0;
}

to your css file, all of up/down (spinner) arrows should be hidden. Y

[jacque_trahan]

For those who are not used to CSS and front end devolvement. The theme file is not in ignition, but in the program files folder somewhere?

A step by step on this would be nice if anyone can help. I will use this code:
How TO - Hide Arrows From Input Number

[pturmel]

@jacque_trahan

The theme file is not in ignition, but in the program files folder somewhere?

They are in Ignition's install folder, which is typically in the program files hierarchy on windows.

[jacque_trahan]

Thank you!

I think this will not work in my situation due to the fact I only need this on one view/project and not all ignition projects/views on a clients remote server. Will look for other work arounds.

[pturmel]

Current Ignition also has a per-project stylesheet.

[cmallonee]

If you only need these rules in one area, you're better served targeting the specific component.

/* Chrome, Safari, Edge, Opera */
#myTargetDomId input::-webkit-outer-spin-button,
#myTargetDomId input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#myTargetDomId input[type=number] {
  -moz-appearance: textfield;
}

Couple this with use of the meta.domId property to target an individual component.