Problem with "fluid" property in InputText

[lmc3s3f0r]

When using "fluid", a PrimeVue component should fill the container's width and height. In my case, I'm using PrimeVue unstyled.

This, however, doesn't happen in InputText, because its "div" wrapper, unlike other components like InputNumber, DatePicker, Select or TextArea, is not getting the classes defined in the theme when props.fluid === true.

I'll try to elaborate. I've set my p-formkit class to be "h-full min-h-[46px] bg-orange-400", and I've set "fluid" to "true" in all my PrimeVue components.

In that scenario, this is how an InputText looks:

You can see that there's room to fill below the input (you can see the div.p-formkit orange background). That's because the wrapper doesn't contain the "size-full" that

For comparison, here are some InputNumber components, which work fine:

In this case, you can see that the wrapper has the "size-full" applied.

Hope it helps. Thanks in advance :)

[sfxcode]

Hi,
normally i use the provided sass file for my styling and i try to fix styling issues there.
By default this styling takes all available space in a container element.

Keep in mind that a formkit component is wrapped in some divs if you use tailwind like classes.

You can use the outerClass Property in the schema file to access the most outer div.
I use this pattern for my simple column usage.

For example:

https://formkit-primevue.netlify.app/styling/grid

Maybe this information will help to solve your problem, please let me know ...

Greetings,

Tom

[lmc3s3f0r]

Hi Tom! Thanks for your reply :)

Not trying to be a PITA, but all the other components' wrappers do get the "size-full" property when fluid is set to true. InputText would be the only PrimeVue component (at least from the ones I've been using so far) that doesn't appy "size-full" to the wrapper when used inside a FormKit.

Just for your consideration, that maybe the solution would be doing in InputText the same that is being done in the other components :)

[sfxcode]

Hi, no problem.

not using the unstyled mode at the moment but maybe there is a problem with InputText styles because the InputText Component is wrapped into an IconField.

For the moment maybe the last version come to help, where i prevent to use the iconfield wrapper if no icons are defined.

Please tell me if it works,

Greetings,

Tom

[molul]

Will try tomorrow morning. Thanks very much :)

[lmc3s3f0r]

It works! Thank you very much :)