A newer version of this page is available.

React Form - colCountByScreen

Specifies the number of Form columns for different screen sizes.

Selector: ColCountByScreen

Type:

Object

Default Value: undefined

The following code snippet specifies 2 columns for the "xs" screen size:

jQuery

index.js

$("#form-container").dxForm({
    colCountByScreen: {
        xs: 2
    }
});

Angular

app.component.html

<dx-form ... >
    <dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
</dx-form>

Vue

App.vue

<template>
    <DxForm ... >
        <DxColCountByScreen :xs="2" />
    </DxForm>
</template>
<script setup lang="ts">
import { DxForm, DxColCountByScreen } from 'devextreme-vue/form';

</script>

React

App.tsx

import React from 'react';
import { Form, ColCountByScreen } from 'devextreme-react/form';

function App() {
    return (
        <Form ... >
            <ColCountByScreen xs={2} />
        </Form>
    );
};

export default App;

NOTE

Changing the column count repaints the Form. Repainting resets item states and reinitializes Form items and item templates.

View Demo