How to change Primevue InputText width and height?

Viewed 24

The documentation lists only two official classes (p-inputtext-sm, p-inputtext-lg) but those are not for setting width and height generally.

1 Answers

You can use the "usual" CSS to change the size of components, e.g. the attributes width and height.

You can set them directly at the component:

<InputText style="width: 100px;">...

or via custom classes:

<template>
  ...
  <InputText class="myclass">...
  ...
</template>

<style>
myclass {
  height: 100px;
}
</style>

If you are using primeflex you would use classes like w-20rem or h-3rem defined here: https://www.primefaces.org/primeflex/height and https://www.primefaces.org/primeflex/width

Related