Kirby

Textarea field - no scrolling, no draggable size?

Hello,

I just noticed that a textarea field isn’t scrollable nor draggable regarding its size. Is there a way to enable this? It’s very user experience unfriendly to have a static size and no scrolling. This makes it harder to work with longer pages I think. Most likely I miss something fundamental here.

Best Regards

For longer text, use a textarea field, not a text field. The text field is only intended for short text.

1 Like

Hi @texnixe,

I’m sorry for the confusion. I thought it’s called text but indeed I use a textarea field:

  text:
    label: Text
    type: text
    size: large
    required: true

Is there a way to add these two features to the field or should I raise a feature request on Github and in the meantime use a fields plugin as described here: https://getkirby.com/docs/reference/plugins/extensions/fields#extending-existing-fields?

I’ve edited my post to reflect that I talk about textarea, not text.

Best Regards

I’m not sure I understand. The textarea field adapts to the size of its content automatically.

And no, there is no scrolling or drag size feature…

I would like to be able to scroll up/down inside the textfield and to be able to drag the field regarding width and height (making it wider or longer).

At the moment I get a very long textfield if there is much text in it. I think it’s better if the textfield is scrollable because I rarely have to see the whole content at once (especially if it can’t fit my screen and I have to scroll the page anyway).

An example given: Just write several lines of text in this forum. Both - the input and preview - become scrollable.

You could solve this with a custom Panel stylesheet.

I found out that the browsers default behavior for a textarea input field is overwritten by this:
width: 878px; overflow-y: hidden; height: 720px;

For example if you remove the overflow-y: hidden; part you get a draggable and scrollable (ugly) textarea. I’m not sure if this is a desired effect by the developers. Maybe some kind of js + default css will offer a proper solution where clipping is no issue but the user can work as freely as he or she wishes.

I think you should set resize: vertical and overflow: scroll.

.k-textarea-input-native {
  resize: vertical;
  overflow-y: scroll;
}

Being able to change the width of the field doesn’t make sense in my opinion.

1 Like

Thanks for your support @texnixe!