Unable to scroll on a disabled field

[Sternchen]

Hello,

Is it possible to make a disabled field scrollable?
The users are only allowed to read the field, but not to write in it. Which is why it is disabled. However, this prevents them from reading the complete text there.
It doesn't matter how many columns I entered in the SP before. Only these 2 are displayed.
For now it looks like this.

Best regards
Corinna

[DryChips]

Hello,

Have you tried setting the field to "Read-Only" in the field properties pane on the right hand side of the designer?

[Sternchen]

Saldy its the same behaviour and we don´t like the look of this.

[DryChips]

Perhaps @Nikita_Kurguzov or @mnikitina can support with this problem!

[mnikitina]

Hello @Sternchen,

You can enable scrolling for disabled fields using the CSS:

.fd-form textarea[disabled]{
  pointer-events: initial;
}

[Sternchen]

@mnikitina

.fd-form textarea[disabled]{
  pointer-events: initial;
}

That worked. Thank you:)

[Sternchen]

One more quick question.
Is there a way that the field dynamically adjusts to the size?

[mnikitina]

@Sternchen,

You are welcome!

Do you mean adjust input height to the text? If so, please see this post:

Display vs Edit field sizes

I have a form using grids and when i show the data using the display mode, the size of the fields dynamically changes to the size of the data in the fields. This is Great! but, when i hit Edit the fields go back to uniform size and you either have to expand the box manually or use the scroll bar to see all the data. any way to get the fields to show all the data in edit mode just like display mode? here are the examples... Display mode: [image] Same Screen edit mode: [image]

[Sternchen]

With the code it now looks like this.

However, it should adapt dynamically to the length of the field.
Here is the code I tried.

var textArea = fd.field('Name').$refs.textarea;
function recalcHeight() {
textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
}
recalcHeight();
$(textArea).keyup(recalcHeight);

Thank you for your help

[mnikitina]

@Sternchen,

"120px" in the code is the minimum height of the field. If you want the height of the field to always fit the content, try this code:

var textArea = fd.field('Text').$refs.textarea;
function recalcHeight() {
    textArea.style.height = '10px'
textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight + 5) + "px" : (textArea.clientHeight + 5) + "px";
}
recalcHeight();

[Sternchen]

@mnikitina

var textArea = fd.field('Text').$refs.textarea;
function recalcHeight() {
    textArea.style.height = '10px'
textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight + 5) + "px" : (textArea.clientHeight + 5) + "px";
}
recalcHeight();

I tried this code and the textarea now looks like this.

[mnikitina]

@Sternchen,

Are you changing the text of this field dynamically? If so, you need to add this code inside the function that changes field value.