"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Get the resources you need to start building today
Microsoft chose Payload to tell the world about AI.
textarea field
Hi,
I'm building a collapsible field with some other fields nested to it, one of these nested field is a textarea field, it all works fine except from the textarea which always renders outside its 'limits' overlapping the elements below (please see screenshot 1). Resizing the textarea from the bottom-right corner fixed the issue (please see screenshot 2), but every time the page reloads the textarea gets bigger again.
Any help on this? What am I missing? Please, Thanks!
Do you have any custom CSS loaded in your project that might be causing this? So far I'm not able to recreate. Could you send me your config?
Hi thanks for your reply. Yes, I have a custom css file loaded in my project, I disabled it to see if it was that, but the textarea field did the same. Maybe I needed to stop the server and run it again. I will do that and let you know. I'm not touching the textarea in my custom css file. I will send you my config soon.
Here my Product collection config:
import { CollectionConfig } from 'payload/types';
const Products: CollectionConfig = {
slug: 'products',
admin: {
useAsTitle: 'productName'
},
fields: [
// general information
{
label: 'Product Information',
type: 'collapsible', // required
fields: [
{
type: 'row',
fields: [
{
name: 'productName',
type: 'text',
required: true,
admin: {
width: '50%',
description: 'a short name',
},
},
{
name: 'slug',
type: 'text',
required: true,
admin: {
width: '50%',
},
},
{
name: 'feature',
type: 'text',
admin: {
},
},
{
name: 'description',
type: 'textarea',
maxLength: 160,
admin: {
placeholder: 'this is a place holder',
description: 'Give your product a short and clear description. 120-160 characters is the recommended length for search engines.'
},
},
{
name: 'discountable',
type: 'checkbox',
label: 'Discountable',
admin: {
description: 'When uncheck discounts will not be applied to this product.',
}
}
],
},
],
},
],
}
export default Products;
I have disabled the custom css, here it is a screenshot of the textarea behaviour
Ok and which browser is that? I might be able to recreate knowing more about your environment.
I have the same exact issue.
There is no custom, or any CSS at all in fact, in my code.
{ type: 'row', fields: [ { name: 'description', type: 'textarea', required: true, admin: { description: 'Publicly visible asset description.', }, }, { name: 'comments', type: 'textarea', admin: { description: 'Private comments and notes.', }, }, ], },Browser: Chrome
My browsers are Edge and Chrome. Windows 10
I changed this in my custom css, from the textarea component css. I commented the default value. It seems to fix the issue.
Thanks for the code
@567578449439621124I was able to recreate that - definitely a UI bug there. If anyone would kindly open an issue on our github to record this, we'll take care of it next monday 🐛
Hi, thanks. I'll try to open an issue tomorrow. Cheers.
Star
Discord
online
Get dedicated engineering support directly from the Payload team.