vue.jsionic-frameworkionic5

ion-input shape property bug?


enter image description hereI am trying to create a form with rounded inputs. Using the docs here I am putting the "shape" and "fill" on ion-input vs the now-deprecated usage on ion-item. However, ion-input seemingly wants to square off the left side? No amount of margin or padding seems to update it. Is it a bug in ionic or am I doing something wrong?

           <ion-item shape="round" fill="outline" lines="none">
             <ion-input v-model="name" name="name" type="text" :spellcheck="false" autocapitalize="off"
                   :placeholder="namePlaceholder" required></ion-input>
          </ion-item>

          <ion-item lines="none">
             <ion-input v-model="email" shape="round" fill="outline" name="email" type="email" :spellcheck="false" 
                   autocapitalize="off" :placeholder="emailPlaceholder" required></ion-input>
          </ion-item>

Solution

  • You nested your ion-input inside an ion-item. You should remove the encapsulating ion-item and move the styling inside the ion-input.