search

formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.89k stars 1.06k forks source link

[BUG] disabled text area with calculated value doesnt show content on multiple lines #2471

Closed gismomtl closed 8 months ago

gismomtl commented 4 years ago

Environment

Please provide as many details as you can:

inside a TextArea component, the calculated value is a concatenation of multiple field value separated by an end of line (\n) with a not-disabled component, text is displayed correctly with return carriage. However when component is disabled, it's not working.. everything is put in the same line

cf https://jsfiddle.net/4vahzLxc/

travist commented 4 years ago

This is most likely expected. If you want it to show in multiple lines, change your textarea to use a wysiwyg editor.

gismomtl commented 4 years ago

With wysiwyg option enabled, it doesn't solve the issue. ( https://jsfiddle.net/4vahzLxc/ has been updated with wysiwyg option enabled

llaurentiu commented 3 years ago

Hi @travist . The defect is still reproducible (I checked 4.12.x. and 5.0.0-m.10).

It is not reproducible when we view a submission in the form builder, because the following css rule applies: div[read-only="true"] .formio-component-textarea div[ref="input"] { white-space: pre-wrap; }. However, this will not apply when the text area is rendered in a modal.

When rendered in our app, the wrapping div does not exist.

I created a jss fiddle to simulate the issue and the fix for both modal and normal rendering: https://jsfiddle.net/darkdante/zxo8ykma/25/

Another solution would be to render <br/> for endlines in read only mode (I see this more safe)

Can the css be included in one of the upcoming releases ? I created a pull request for this: https://github.com/formio/formio.js/pull/3494

daneformio commented 8 months ago

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!