Forum | Appery.io

I have several ion-inputs, type=number, in a grid row and I expect that on smaller devices this should wrap.

This works fine in the xs/sm setting in testing but in the APK on my phone one of the input element is too small (only takes 3 digits and I need 4) and clips the numbers withmore than 3 digits. I'd like to be able to set the minimum size of the input.

I've tried setting the "size" attribute but this had no impact. What is the right way to do this

Hello Kevin,

What project type do you use Ionic 1 or Ionic 4? Do you use Appery.io default input component or the custom one using the HTML layout?

IONIC4, default input component

Please try the same with the HTML component and the standard Ionic input https://ionicframework.com/docs/api/input
Does the size work for you there?

The IONIC documentation indicates using the size attribute, however this does not work due to the CSS width definitions overrising this.

I found that simply setting the width in CSS was fine, i.e., I defined the follow CSS

.fourdigits {min-width: 44px;}

.threedigits { min-width: 34px; }

then added that as a class to the ion-input using the class properly in the panel.

Please use an attribute "maxlength" instead of "size", it should work fine with the input component