CODEWITHSUNDEEP
cssionic2positionlabelvertical-alignment
karlo1zg
karlo1zg

Reputation: 181

Vertically aligning floated label in the middle of an input element Ionic

So, I don't want to use placeholder, instead I want to use ion-label like placeholder. I need to vertically align FLOATED ion-label inside an ion-input element and when user clicks and/or enter the text in ion-input field ion-label should stay on top of it.

This is what I got so far:

IONIC:

    <ion-item>
      <ion-label floating class="label__placeholder">SMS</ion-label>
      <ion-input name="first_name"
        type="text"
        ngModel
        required>
      </ion-input>
    </ion-item>

SCSS:

    ion-label {
      font-family: 'Roboto', sans-serif;
      font-size: 18px !important;
      margin-bottom: 5px;
      padding-left: 15px;

      &.label__placeholder {
        position: absolute;
        bottom: 30px;
      }
    }

This is the picture how it is now and how ion-label should look like when it's not clicked on ion-input:

enter image description here

And this is when I click on ion-input, ion-label goes on top of ion-input but it's not visible:

enter image description here

And this is how it should look like when ion-input is clicked:

enter image description here

I managed to position ion-label in the middle of an ion-input but when I click on ion-input, ion-label goes on top of the ion-input and it's not visible, like it goes somewhere behind, don't know where. Tried to use z-index also but it didn't help.

Upvotes: 1

Views: 1662

Answers (1)

karlo1zg
karlo1zg

Reputation: 181

I managed to solve this problem. I removed position: absolute and bottom: 30px from &.label__placeholder and use this code instead and it works: 

    ion-label {
      font-family: 'Roboto', sans-serif;
      font-size: 18px !important;
      padding-left: 15px;
      &.label__placeholder {
        font-size: 15px !important;
        line-height: 13px;
        margin-bottom: 0 !important;
      }
    }

Here is how it looks now when ion-input is not clicked and when it is: enter image description here

enter image description here

Upvotes: 1

Related Questions