Textarea Newline

I am trying to have the textarea recognize newlines, but I have been unable to achieve this. The css method of white-space: pre-line; or white-space: pre-wrap; has not worked for me.

I am also writing the textarea value to an html file, so I think this method would only work as an inline style if possible.

Any help would be greatly appreciated!

a simple example ( remember pip install feffery-antd-components ):

document of AntdInput: feffery-antd-components在线文档

import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdInput(
                    id='text-area-demo',
                    placeholder='Please enter content...',
                    mode='text-area',
                    style={
                        'width': 400
                    },
                    autoSize={
                        'minRows': 3,
                        'maxRows': 6
                    }
                ),
                html.Div(
                    id='written-content',
                    style={
                        'whiteSpace': 'pre'
                    }
                )
            ],
            direction='vertical'
        )
    ],
    style={
        'padding': 150
    }
)


@app.callback(
    Output('written-content', 'children'),
    Input('text-area-demo', 'value')
)
def sync_written_content(value):

    return value


if __name__ == '__main__':
    app.run(debug=True)

图5

1 Like

Hi @Chris7 and welcome to the Dash community :slight_smile:

This also works with dcc.Textarea - you can see a live example in the docs here:

If that’s not exactly what you are looking for, could you post a minimal example that replicates the issue?

1 Like

Thank you so much for the detailed solution! I really appreciate it. This is exactly what I was trying to do.

Thank you for the welcome and documentation; glad to be a part of the community!