All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

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
     ],
     // ...
 })

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
     ],
     // ...
 })
See Also