A newer version of this page is available. Switch to the current version.

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