Reputation: 1328
i am trying to get a $ sign for currency data entry inside the ion-input. the HTML looks like below
<ion-col>
<ion-input class="ban-input" fill="outline" type="number" [(ngModel)]="realEstate.value"></ion-input>
</ion-col>
and the CSS
ion-input {
border-radius: 6px;
border: 1px solid #AEB1B5;
}
.ban-input {
--placeholder-color: #AEB1B5 !important; //grey-700
--padding-start: 5px !important;
}
ion-input[type=number]::before {
content: "$";
}
though it displays the $ but it creates a whole new empty line by doubling the height of the input box. another thing is I don't want to apply it is all the number type input but only the one I use for currency.
please advise.
Upvotes: 1
Views: 26
Reputation: 146
You can use the start and end slots can be used to place icons, buttons, or prefix/suffix text on either side of the input.
Note that this feature is considered experimental because it relies on a simulated version of Web Component slots. As a result, the simulated behavior may not exactly match the native slot behavior.
<ion-input labelPlacement="stacked" label="Email" placeholder="email@domain.com">
<ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
</ion-input>
Reference: https://ionicframework.com/docs/api/input#start-and-end-slots-experimental
Upvotes: 1