I am trying to figure out how to turn on up/down arrows in the text box field which is configured as number, but with no success.
When I use keyboard arrows it works, but the little arrows are not showing.
I would like to achieve this:
I suppose you could build your own arrows like the following:
clone:
https://anvil.works/build#clone:OSS6EMHCATCEMXSZ=JSJHTQ7AVP5LKY7MNBVW2RLA
Would that work well enough for you?
Some browsers do not display built-in arrows, but some do. I find that Firefox and Chrome differ in this respect. When the browser displays its own arrows, then the additional arrows would be redundant (and confusing).
Oh I see. I didn’t even know there were actual arrows (I use mainly Chrome).
Good to know. Thanks.
Yeah, it varies. I haven’t tried it in Edge, Opera, Android, Apple, …
Just a work around, but if you keep the TextBox set to “text” and use some custom arrows (e.g., see the app below), you can avoid the browser differences @p.colbert mentioned. Not perfect, but it works.
Of course you have to cast your strings to floats and vice versa.
Here’s a clone with that happening:
https://anvil.works/build#clone:OSS6EMHCATCEMXSZ=JSJHTQ7AVP5LKY7MNBVW2RLA
1 Like
ok this would be maybe solution for me !
I have installed Firefox today and it is the only browser where I get arrows, also tried Edge - there I got little cross to delete the number and Android and Chrome - no arrows at all.
Out of curiosity, what happens if you run this fiddle :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number
In Chrome, I get the arrows when the mouse hovers over the box, and they disappear when I move the mouse away. I’m on Ubuntu 18.04 running the latest Chrome.
yes, this works. I have other apps for example in Flask and I got those arrows working but not in Anvil, so I wonder if you get chrome number field arrows in some Anvil app ?
Alas, there is another browser problem I’ve run into with this approach: mobile devices, and their pop-up keyboards. When the field is of type number, most devices will pop up a number pad. If it is of type text, they pop up a full-text keyboard instead; some, with no visible digits.
I believe this is why Anvil added the subtypes: to tell the mobile device which kind of keyboard to pop up.
1 Like
Ahh, that makes sense. Thanks for pointing that out.
I believe this is why Anvil added the subtypes: to tell the mobile device which kind of keyboard to pop up.
This was the primary reason, yes! We actually use CSS to hide those buttons by default in the browsers that have them, so as to allow numerical input without always having arrows. If you want arrows, as @alcampopiano says, you can add your own.
1 Like
can I change that ? I think this is what I am looking for…
You may want to recheck this, when time permits. Last I looked, Firefox for Windows still displays up/down buttons for number fields.
1 Like
Yes! (tested on Firefox, Chrome, and Safari)
Look under “Assets”. There you can choose to edit “theme.css”.
If you scroll down near the end you will see:
/* Component: TextBox + TextArea */
.
.
.
If you add the following CSS underneath, it should do the trick.
/* Hack to remove little arrows (spinners) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
Clone to try:
Disclaimer:
I don’t know much about CSS and I’ve only tested this on Chrome, Firefox, and Safari. This potential solution is something I dug up from Google. Apparently the little arrows are called spinners from what I could gather.
1 Like
don’t know why but I can’t get this work, these arrows just don’t appear 
Do you mean you can’t access the “theme.css”?
All apps should have HTML/CSS available on the individual plan or higher, as far as I understand.
Can you send a screenshot?
yes I can access CSS but can not get it to display those arrows.
Could you please show me some simple app where the arrows are working ? I tried your last one but no arrows also, I tried custom html, tried to edit css as you suggested but nothing works.
On the other hand, app running on repl.it or python anywhere works well…
Just to be clear. I was demonstrating how to remove the little tiny arrows that appear in some browsers in the TextBox component.
The reason I removed them was because they don’t appear in all browsers.
Thus, if you want arrows you can build your own custom arrows, and use the above CSS to remove the arrows that are sometimes set by the browser.
The app above removes the “browser-based” arrows, and uses custom arrows instead. This way things are consistent across browsers.
Does that make sense?
if someone finds out how to display native browser arrows (with all disadvantages they can bring), please let me know here…
1 Like