Setting size of ionic-input

Moderator: Support

kevinmcisaac
Posts: 37
Joined: Mon Oct 05, 2020 8:27 am

Setting size of ionic-input

Post by kevinmcisaac »

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

Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Setting size of ionic-input

Post by Serhii Kulibaba »

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?

kevinmcisaac
Posts: 37
Joined: Mon Oct 05, 2020 8:27 am

Re: Setting size of ionic-input

Post by kevinmcisaac »

IONIC4, default input component

Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Setting size of ionic-input

Post by Serhii Kulibaba »

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?

kevinmcisaac
Posts: 37
Joined: Mon Oct 05, 2020 8:27 am

Re: Setting size of ionic-input

Post by kevinmcisaac »

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

Code: Select all

.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.

Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Setting size of ionic-input

Post by Serhii Kulibaba »

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

Post Reply