colCountByScreen

Specifies the relation between the screen size qualifier and the number of columns in the tabbed layout.

Type:

Object

Default Value: undefined
jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "tabbed",
            tabs: [{
                items: [ ... ],
                colCountByScreen: {
                    xs: 2, 
                    sm: 3  
                }
            }]
        },
        // ...
        ]
    });
});
Angular
app.component.html
app.module.ts
<dx-form ... >
    <dxi-item itemType="tabbed">
        <dxi-tab title="Phone">
            <dxo-col-count-by-screen 
                [xs]="2"  
                [sm]="3"> 
            </dxo-col-count-by-screen>
            <dxi-item ... ></dxi-item>
        </dxi-tab>
    </dxi-item>
</dx-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFormModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFormModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

lg

The count of columns for a large screen size.

Type:

Number

Default Value: undefined

md

The count of columns for a middle-sized screen.

Type:

Number

Default Value: undefined

sm

The count of columns for a small-sized screen.

Type:

Number

Default Value: undefined

xs

The count of columns for an extra small-sized screen.

Type:

Number

Default Value: undefined