Hi, i wanted to show the arrow in my input (input type - numbers) for reactive web. How can I achieve this? Thank you in advance!
Below I attach screenshot for my current input.
Hi Syakir,
For the mentioned objective, try to define the below mentioned CSS definition in the Screen Scope or the module Scope (Style Sheet section)
[data-input][type="number"]::-webkit-inner-spin-button, [data-input][type="number"]::-webkit-outer-spin-button { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; }
See this sample app-NumberInputTask
Note: Make sure that the Input widget Type is Number
Hope this helps you!
Kind regards,
Benjith Sam
Hi thanks a lot sir it really works! But may I know how to set the min and max for the input?Below I attach a screenshot with your solution :D
You're welcome, Syakir :)
The mentioned use-case, can be achieved by defining some JavaScript validation (client side) followed with Server side validation before inserting the final value to the respective Database table.
https://www.outsystems.com/forums/discussion/27816/mobile-max-length-of-input-not-working/#Post101595
https://www.outsystems.com/forums/discussion/42393/mobile-app-how-do-i-set-min-and-max-integer-or-decimal-value-for-input/#Post152690
https://www.outsystems.com/forums/discussion/53269/how-to-limit-the-number-of-inputnumber-in-a-text-box/#Post199288
There's the HTML min and max attributes you can use to limit the values that can be entered, and the step attribute to define the step value. You can put these in the Extended Properties of the Input Widget.
What "arrow" do you mean?
Like this one sir