Moblize IT
Moblize IT

Reputation: 1328

ion-input adding a dollar sign inside

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.

enter image description here

Upvotes: 1

Views: 26

Answers (1)

StackOverHoes
StackOverHoes

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

Related Questions