Numeric Entry Field Arrows/Spinners

Ignition
1

Hi,

I am working on creating numeric entry fields for the plant operators to set the priority of some different devices in the field. Does anyone know if there is a way to hide/disable the “arrows” when you click on the field to enter a number? Tech support thought you might be able to use @keyframes to remove them but I couldn’t figure it out.

image

2

Via theming, you can set some non-standard properties for the browsers you care about:
https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

3

I had seen this thread and tried what I thought was correct but I’m clearly doing something wrong. Here’s what I have in my .css file. Is it obvious what I’m doing wrong?

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

4

Make sure it is in your numeric entry field .css and that your custom theme is being used in the project. Also make sure that it is compatible with the browser you are using, firefox doesn’t support those elements. You don’t need @keyframes either.

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

That works! Took out the @keyframes and placed this code in the numeric-entry-field.css file.

Thank for the help!

6

New question. Is there a way to implement this same feature in Perspective Workstation?

7

Workstation uses Chromium for rendering, so the webkit properties should work there.

8

Is there something that I need to do differently? When I open the application with chrome the arrows aren’t there but when I open the app using perspective workstation, they still show up.

9

You’re in the realm of unsupported behavior, so it’s hard to say. I can guarantee that Workstation uses Chromium for rendering, which should obey webkit properties. I don’t see anything in JxBrowser’s documentation about not following webkit flags, or requiring you to opt in to them, so I don’t know what’s happening. You could try clearing your .ignition cache; maybe the browser is caching old themes and not getting your updated theme.

10

Sorry to hijack this thread, but is there a way to hide the arrows on SOME numeric entry field components and not on others?
From what little I know about CSS, if I create a custom them so that these are hidden and use that theme for my project, then ALL of the spinner buttons on all the numeric entry fields in the project will be hidden. Am I wrong about that?
If not, how could some be shown and specific ones have the spinners hidden?

11

You would need to use a custom class which disables them and apply that class as needed.

12

That’s a bit outside my wheelhouse, plus I don’t think it would be worth the effort in my case. Thanks!

13

I think it's going to be possible to enable/disable spinners on a per component basis in one of the new updates.

15

Never mind! I found it.

16

It would have been really nice if you had told us where you found it.

1 Like