All docs
V22.2
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Adapt the Size of the Text Area

If the size of the UI component should be fixed, specify it using the height and width properties.

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.light.css';

import { DxTextArea } from 'devextreme-vue/text-area';

export default {
    components: {
        DxTextArea
    }
}
</script>
React
import React from 'react';
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 UI component's height can adapt to the UI component's contents. In this case, instead of specifying the height property, you need to set the autoResizeEnabled property to true. To specify the minimum and maximum height that the adapted TextArea can occupy, set the minHeight and maxHeight properties.

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.light.css';

import { DxTextArea } from 'devextreme-vue/text-area';

export default {
    components: {
        DxTextArea
    }
}
</script>
React
import React from 'react';
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