Min, max and step for TextBox with type "number"

[Matthias]

Hi guys,
Is there a way to set min, max and step for a TextBox with type “number”?
I can set databindings to all kinds of stuff, but not for these three properties which I find quite important for numeric input fields.

[campopianoa]

Something that comes to mind would be to use the “change” event. You could then determine if the value is outside your limits and react accordingly. I’m not sure how to control the step though without creating a custom component.

That is, I might create my own custom text component, with up/down arrows, and then I’d have control over everything.

Perhaps this post might help as it contains a clone with Anvil-native up/down arrows on a text box.

Text box number - how to display up/down arrows

Yes! (tested on Firefox, Chrome, and Safari) Look under “Assets”. There you can choose to edit “theme.css”. [sc1] 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 */…

There may be a JS way of handling this but I have not looked into it.

[Matthias]

Thanks @alcampopiano, that helped. In principle I got it working, but when I copied over the two buttons from the App you referenced (just a copy & paste in the IDE), the icons got smaller and when running the App in Chrome, the two buttons where replaced with “…”. In Firefox all worked well. Any idea why that could be?

And btw, is there a trick to place these two buttons directly above each other? When I copy them over, they are exactly stacked. But when I start moving them around I never get them back to their original position (on top of each other).

Any hint is kindly appreciated!

[campopianoa]

I’m not sure. Usually the ‘…’ happen when something is getting squished. The app works in both browsers for me.

Regarding positioning, sometimes you just have to play around with things to get the position just right. Although I didn’t do it in that app, you might try looking at a LinearPanel to put your buttons in. That might might help you to get them stacked vertically, but it the app should work even without that as my clone does.

If you can’t make progress, share a clone here if you are able (click and follow instructions).

[Matthias]

My workaround for the moment was to remove the icons from the buttons and use + and - signs in the “text” property instead. Seems that Chrome does not respect the width of the icon, but of the text field. But my impression is, that something happened during the Copy & Paste, because the arrows looked already different (smaller) in the Anvil IDE after I copied them over from your examle app. I will investigate this further as soon as I have a bit more time.

[campopianoa]

Okay. Good luck with your development. A clone would be helpful if you would like other to take a look.