All docs
V20.2
21.1 (CTP)
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Resize and Relocate

Specify the height and width properties to change the LoadPanel's size:

jQuery
JavaScript
$(function() {
    $("#loadPanelContainer").dxLoadPanel({
        closeOnOutsideClick: true,
        height: 300,
        width: 500
    });

    $("#buttonContainer").dxButton({
        text: "Show the Load Panel", 
        onClick: function () {
            $("#loadPanelContainer").dxLoadPanel("show");
        } 
    });
});
Angular
HTML
TypeScript
<dx-load-panel
    [closeOnOutsideClick]="true"
    [(visible)]="isLoadPanelVisible"
    [height]="300"
    [width]="500">
</dx-load-panel>
<dx-button
    text="Show the Load Panel"
    (onClick)="isLoadPanelVisible = true">
</dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadPanelVisible: boolean = false;
}
@NgModule({
    imports: [
        // ...
        DxLoadPanelModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <div>
        <DxLoadPanel
            :close-on-outside-click="true"
            v-model:visible="isLoadPanelVisible"
            :height="300"
            :width="500"
        />
        <DxButton
            text="Show the Load Panel"
            @click="handleClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLoadPanel } from 'devextreme-vue/load-panel';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxLoadPanel,
        DxButton
    },
    data() {
        return {
            isLoadPanelVisible: false
        }
    },
    methods: {
        handleClick() {
            this.isLoadPanelVisible = true;
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { LoadPanel } from 'devextreme-react/load-panel';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoadPanelVisible: false
        };

        this.handleClick = this.handleClick.bind(this);
        this.handleHide = this.handleHide.bind(this);
    }

    handleClick() {
        this.setState({
            isLoadPanelVisible: true
        });
    }

    handleHide() {
        this.setState({
            isLoadPanelVisible: false
        });
    }

    render() {
        return (
            <div>
                <LoadPanel
                    closeOnOutsideClick={true}
                    visible={this.state.isLoadPanelVisible}
                    onHidden={this.handleHide}
                    height={300}
                    width={500}
                />
                <Button
                    text="Show the Load Panel"
                    onClick={this.handleClick}
                />
            </div>
        );
    }
}

export default App;

The container property specifies the LoadPanel's container. The container is shaded when the LoadPanel is visible; the LoadPanel inherits styles from the container and is scrolled with. To position the UI component relative to a specific element, use the position property:

jQuery
JavaScript
$(function() {
    $("#loadPanelContainer").dxLoadPanel({
        closeOnOutsideClick: true,
        container: "#container",
        position: { my: "left", at: "left", of: "#targetElement" }
    });  

    $("#buttonContainer").dxButton({
        text: "Show the Load Panel", 
        onClick: function () {
            $("#loadPanelContainer").dxLoadPanel("show");
        } 
    });
});
Angular
HTML
TypeScript
<dx-load-panel
    [closeOnOutsideClick]="true"
    container="#container"
    [(visible)]="isLoadPanelVisible">
    <dxo-position
        my="left"
        at="left"
        of="#targetElement">
    </dxo-position>
</dx-load-panel>
<dx-button
    text="Show the Load Panel"
    (onClick)="isLoadPanelVisible = true">
</dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadPanelVisible: boolean = false;
}
@NgModule({
    imports: [
        // ...
        DxLoadPanelModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <div>
        <DxLoadPanel
            :close-on-outside-click="true"
            v-model:visible="isLoadPanelVisible"
            container="#container">
            <DxPosition
                my="left"
                at="left"
                of="#targetElement"/>
        </DxLoadPanel>
        <DxButton
            text="Show the Load Panel"
            @click="handleClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLoadPanel, DxPosition } from 'devextreme-vue/load-panel';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxLoadPanel,
        DxButton
    },
    data() {
        return {
            isLoadPanelVisible: false
        }
    },
    methods: {
        handleClick() {
            this.isLoadPanelVisible = true;
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { LoadPanel, Position } from 'devextreme-react/load-panel';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoadPanelVisible: false
        };

        this.handleClick = this.handleClick.bind(this);
        this.handleHide = this.handleHide.bind(this);
    }

    handleClick() {
        this.setState({
            isLoadPanelVisible: true
        });
    }

    handleHide() {
        this.setState({
            isLoadPanelVisible: false
        });
    }

    render() {
        return (
            <div>
                <LoadPanel
                    closeOnOutsideClick={true}
                    visible={this.state.isLoadPanelVisible}
                    inHidden={this.handleHide}
                    container="#container">
                    <Position
                        my="left"
                        at="left"
                        of="#targetElement"/>
                </LoadPanel>
                <Button
                    text="Show the Load Panel"
                    onClick={this.handleClick}
                />
            </div>
        );
    }
}

export default App;

This configuration of the position property reads as follows: "place my left side at the left of the "#targetElement".

See Also