Vue ResponsiveBox - items.location

Specifies the item location and size against the UI component grid.

Selector: DxLocation
Type:

Object

|

Array<Object>

If you need to specify different locations for different screens, pass an array of objects with the same structure to the location field.

HTML
<div data-options="dxItem: { 
    location: [
        { row: 0, col: 0, colspan: 3, screen: "lg"},
        { row: 0, col: 0, colspan: 2, screen: "xs sm md"}
    ]
}"> <p>Header</p> </div>

View Demo

See Also

col

Specifies which column the element should occupy. Accepts an index from the cols array.

Type:

Number

See Also

colspan

Specifies how many columns the element should span.

Type:

Number

Default Value: undefined

See Also

row

Specifies which row the element should occupy. Accepts an index from the rows array.

Type:

Number

See Also

rowspan

Specifies how many rows the element should span.

Type:

Number

Default Value: undefined

See Also

screen

Decides on which screens the current location settings should be applied to the element.

Type:

String

Default Value: undefined

Before applying the current location settings, the UI component considers the screen's width and applies the location settings only if the width matches the specified size qualifier. There are four size qualifiers in all.

Size Qualifier Description
xs Stands for "extra small". Screens with width less than 768 pixels.
sm Stands for "small". Screens with width between 768 and 992 pixels.
md Stands for "medium". Screens with width between 992 and 1200 pixels.
lg Stands for "large". Screens with width more than 1200 pixels.

The screen property accepts one or several size qualifiers separated by a space. For example, the following settings apply to an element on medium and large screens only.

HTML
<div id="responsiveBoxContainer">
    <div data-options="dxItem: {
        location: {
            screen: "md lg",
            row: 0, col: 0
        }
    }"></div>
</div>

View Demo

See Also