Ion-textarea how to change the inner border thickness

Ionic Framework
1

This might be a unique one, or just hard to find because of the wording. I’m wondering if I can change the inner border width of a ion-textarea so my text goes closer to the edge without wrapping or being cut-off.

notWorking

as you can see in the picture, there is a lot of room, on the sides and the top. I want to make the font size bigger, but even at this size, some letters get cut off, or they start wrapping if I let it.

Anyway to change this “border thickness” or make the text not get cut off?

here is my code if it helps…

html:

<ion-item class = "backColor3">
      <ion-textarea class="textAreaHeight2"   readonly="true" auto-grow="true" type="text" name="d1d" [ngModel]="d1d" ></ion-textarea>
      </ion-item>

css:

.textAreaHeight2 {
  font-size: 12px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  min-width: 30px;
  left: -4px;
}

.backColor3{
  --ion-background-color:rgba(60, 200, 160, 0.418);
  border-radius: 200%;
  margin-left: 10px;
  min-width: 55px;
  min-height: 55px;
  max-width: 55px;
  max-height: 55px;
}

Thanks for any help or suggestions that you can give!

2

Take a look at the custom properties for ion-textarea.

You’d way to use something like --padding-start and --padding-end and adjust it to fit your needs.

3

Thank you so much!!! That plus --inner-padding-end fixed my problem!! :smiley: you are the bomb!