size
Specifies the widget's size in pixels.
The widget occupies its container's entire area by default. Use the size object to specify the widget's size if it should be different from that of its container. Assign 0 to size object's height and width options to hide the widget.
jQuery
index.js
$(function() { $("#rangeSelectorContainer").dxRangeSelector({ // ... size: { height: 300, width: 600 } }); });
Angular
app.component.html
app.component.ts
app.module.ts
<dx-range-selector ... > <dxo-size [height]="300" [width]="600"> </dxo-size> </dx-range-selector>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxRangeSelectorModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxRangeSelectorModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue
<template> <dx-range-selector ... > <dx-size :height="300" :width="600" /> </dx-range-selector> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxRangeSelector, { DxSize } from 'devextreme-vue/range-selector'; export default { components: { DxRangeSelector, DxSize }, // ... } </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import RangeSelector, { Size } from 'devextreme-react/range-selector'; class App extends React.Component { render() { return ( <RangeSelector ... > <Size height={300} width={600} /> </RangeSelector> ); } } export default App;
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.