DevExtreme React - Specify an Item Size

NOTE
In this document, "size" is an item's width or height, depending on whether the direction option is set to "row" or "col" respectively.

An item's size is controlled by three settings: baseSize, ratio, and shrink. The baseSize defines the initial item size in pixels. The item's size changes according to ratio and shrink if the Box's size changes.

When the Box provides more space than the items' baseSizes require, an unoccupied area emerges.

DevExtreme Box: Unoccupied area

The unoccupied area can be distributed among the items according to ratios. If all items have the same ratio, the area is distributed evenly. The following is an example of when ratios are different. As a result, Item 2 gets a portion twice the size of Item 3, but three times smaller than Item 1:

DevExtreme Box: Distribution of unoccuppied area

jQuery
HTML
JavaScript
CSS
<div id="boxContainer">
    <div class="box-item orange" data-options="dxItem: { baseSize: 200, ratio: 6 }"> Item 1 </div>
    <div class="box-item yellow" data-options="dxItem: { baseSize: 100, ratio: 2 }"> Item 2 </div>
    <div class="box-item green"  data-options="dxItem: { baseSize: 150, ratio: 1 }"> Item 3 </div>
</div>
$(function() {
    $("#boxContainer").dxBox({
        height: 100,
        width: 600
    });
});
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }
Angular
HTML
TypeScript
CSS
<dx-box [height]="100" [width]="600">
    <dxi-item class="box-item orange" [baseSize]="200" [ratio]="6"> Item 1 </dxi-item>
    <dxi-item class="box-item yellow" [baseSize]="100" [ratio]="2"> Item 2 </dxi-item>
    <dxi-item class="box-item green"  [baseSize]="150" [ratio]="1"> Item 3 </dxi-item>
</dx-box>
import { DxBoxModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBoxModule
    ],
    // ...
})
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }

ratio applies when there is an available space, shrink applies when space is limited. After all items' baseSize are added up, they may be too large to fit into the container.

DevExtreme Box: Items overflow the container

shrink determines how much the items should shrink to fit in this case. The higher the shrink value, the more an item shrinks relative to the rest of the items. The following example illustrates a situation when all items have the same shrink value:

DevExtreme Box: Items shrink evenly to fit into the container

jQuery
HTML
JavaScript
CSS
<div id="boxContainer">
    <div class="box-item orange" data-options="dxItem: { baseSize: 200, shrink: 1 }"> Item 1 </div>
    <div class="box-item yellow" data-options="dxItem: { baseSize: 200, shrink: 1 }"> Item 2 </div>
    <div class="box-item green"  data-options="dxItem: { baseSize: 200, shrink: 1 }"> Item 3 </div>
</div>
$(function() {
    $("#boxContainer").dxBox({
        height: 100,
        width: 300
    });
});
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }
Angular
HTML
TypeScript
CSS
<dx-box [height]="100" [width]="300">
    <dxi-item class="box-item orange" [baseSize]="200" [shrink]="1"> Item 1 </dxi-item>
    <dxi-item class="box-item yellow" [baseSize]="200" [shrink]="1"> Item 2 </dxi-item>
    <dxi-item class="box-item green"  [baseSize]="200" [shrink]="1"> Item 3 </dxi-item>
</dx-box>
import { DxBoxModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBoxModule
    ],
    // ...
})
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }

Note how the result is different if Item 2's shrink value is twice more than the other items:

DevExtreme Box: Item 2 shrinks twice more than the others

jQuery
HTML
JavaScript
CSS
<div id="boxContainer">
    <div class="box-item orange" data-options="dxItem: { baseSize: 200, shrink: 1 }"> Item 1 </div>
    <div class="box-item yellow" data-options="dxItem: { baseSize: 200, shrink: 2 }"> Item 2 </div>
    <div class="box-item green"  data-options="dxItem: { baseSize: 200, shrink: 1 }"> Item 3 </div>
</div>
$(function() {
    $("#boxContainer").dxBox({
        height: 100,
        width: 300
    });
});
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }
Angular
HTML
TypeScript
CSS
<dx-box [height]="100" [width]="300">
    <dxi-item class="box-item orange" [baseSize]="200" [shrink]="1"> Item 1 </dxi-item>
    <dxi-item class="box-item yellow" [baseSize]="200" [shrink]="2"> Item 2 </dxi-item>
    <dxi-item class="box-item green"  [baseSize]="200" [shrink]="1"> Item 3 </dxi-item>
</dx-box>
import { DxBoxModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBoxModule
    ],
    // ...
})
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }
See Also