Numeric Entry Field Arrows/Spinners

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

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

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;
}
}

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;
}

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

Thank for the help!

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

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

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.

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.