How to position floating ion-label inside ion-text-area? - css

Question

In my Ionic 5 app, I am displaying a text-area with a floating label like so:
Then when the user clicks on the <ion-text-area>, it appears like this:
Can someone please tell me how I can initially display the floating label nicely inside the text-area?
The label should be within the radius of the text-area when the page loads up.
Here is my current HTML & CSS:
<ion-item lines="none">
<ion-label position="floating">
Please describe your issue to {{ mechanicToContact.name }} here
</ion-label>
<ion-textarea
style="border-radius:30px;
background: #6E73AA;
padding: 5px";
color="primary"
rows="6"
cols="20"
required
minlength="15">
</ion-textarea>
</ion-item>

Answer 1

Just place your ion-label in "front" of your ion-textarea using z-index css attribute.
I suggest you do something like this to achieve relatively what you are looking for.
component.html
<ion-item lines="none">
<ion-label position="floating" class="position-label-inside">
Please describe your issue to {{ mechanicToContact.name }} here
</ion-label>
<ion-textarea
style="border-radius:30px;
background: #6E73AA;
padding: 5px;"
color="primary"
rows="6"
cols="20"
required
minlength="15">
</ion-textarea>
</ion-item>
component.scss
#keyframes slide-out {
from {padding-left: 15px}
to {padding-left: 0}
}
.position-label-inside {
padding-left: 15px;
z-index: 1;
}
ion-item.item-has-focus {
.position-label-inside {
animation-name: slide-out;
animation-duration: 1s;
padding-left: 0!important;
}
}
ion-textarea {
z-index: 0;
}