textarea field

default discord avatar
Eustachio
8 months ago
12

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!

  • discord user avatar
    jacobsfletch
    Payload Team
    8 months ago

    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?

  • default discord avatar
    Eustachio
    8 months ago

    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



    payloadcms-textarea3.gif
  • discord user avatar
    jacobsfletch
    Payload Team
    8 months ago

    Ok and which browser is that? I might be able to recreate knowing more about your environment.

  • default discord avatar
    KasparTr
    8 months ago

    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

    image.png
  • default discord avatar
    Eustachio
    8 months ago

    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.

    image.png
    payloadcms-textarea4.gif
  • discord user avatar
    jesschow
    Payload Team
    8 months ago

    Thanks for the code @KasparTr I 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 🐛

  • default discord avatar
    Eustachio
    8 months ago

    Hi, thanks. I'll try to open an issue tomorrow. Cheers.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.