Input width

[mirkocutri]

Hello,

How an Input can be resized in its width? Actually, it's using much more space than I need and it is taking space from other elements who need space.

This is my code:

<wa-input value="123" size="small" style=" --width: 50px; --border-color: #FF0000;" readonly>
  <wa-icon name="lock" variant="solid" slot="suffix"></wa-icon>
</wa-input>

Thanks for your help

[KonnorRogers]

There's so many ways to change width of an element, but the simplest is to just set a width.

<wa-input style="width: 100px;"></wa-input>

https://codepen.io/paramagicdev/pen/KKObmXz?editors=1000

[mirkocutri]

Thanks Konnor. I removed the dashes from the width and now it works! Great!

[mirkocutri]

@KonnorRogers is text-alignment also possible? It is needed for numeric values.
<wa-input value="100.00" style="text-align: right; width: 200px;"></wa-input>
This doesn't seem to work. Thanks

[KonnorRogers]

For that you'll need to use a ::part(input)

https://codepen.io/paramagicdev/pen/LYwMLvV?editors=1000

  wa-input::part(input) {
     text-align: end;
  }

[mirkocutri]

Thanks, this will move the text to the right, but in this case, all inputs are affected. Is there a way to personalize the alignment from input to input? Do I need to create classes for each "alignment type"?

[claviska]

You can use classes or IDs to target groups or individual elements, respectively.

/* e.g. <wa-input id="my-input"> */
#my-input::part(input) {
  text-align: end;
}

/* e.g. <wa-input class="my-input"> */
.my-inputs::part(input) {
  text-align: end;
}