DevExtreme jQuery - Adapt the Size of the Text Area
If the size of the widget should be fixed, specify it using the height and width options.
jQuery
JavaScript
$(function() { $("#textAreaContainer").dxTextArea({ height: 200, width: 300 }); });
Angular
HTML
TypeScript
<dx-text-area [height]="200" [width]="300"> </dx-text-area>
import { DxTextAreaModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTextAreaModule ], // ... })
Vue
<template> <DxTextArea :height="200" :width="300" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxTextArea } from 'devextreme-vue/text-area'; export default { components: { DxTextArea } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { TextArea } from 'devextreme-react/text-area'; class App extends React.Component { render() { return ( <TextArea height={200} width={300} /> ); } } export default App;
Alternatively, the widget's height can adapt to the widget's contents. In this case, instead of specifying the height option, you need to set the autoResizeEnabled option to true. To specify the minimum and maximum height that the adapted TextArea can occupy, set the minHeight and maxHeight options.
jQuery
JavaScript
$(function() { $("#textAreaContainer").dxTextArea({ autoResizeEnabled: true, minHeight: 100, maxHeight: 200 }); });
Angular
HTML
TypeScript
<dx-text-area [autoResizeEnabled]="true" [minHeight]="100" [maxHeight]="200"> </dx-text-area>
import { DxTextAreaModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTextAreaModule ], // ... })
Vue
<template> <DxTextArea :auto-resize-enabled="true" :min-height="100" :max-height="200" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxTextArea } from 'devextreme-vue/text-area'; export default { components: { DxTextArea } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { TextArea } from 'devextreme-react/text-area'; class App extends React.Component { render() { return ( <TextArea autoResizeEnabled={true} minHeight={100} maxHeight={200} /> ); } } export default App;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.