Vue ResponsiveBox - location

Specifies the item location and size against the widget grid.

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>

col

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

Type:

Number

colspan

Specifies how many columns the element should span.

Type:

Number

Default Value: undefined

row

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

Type:

Number

rowspan

Specifies how many rows the element should span.

Type:

Number

Default Value: undefined

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 widget 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 option 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>
See Also