DevExtreme Angular - Resize and Relocate

Specify the height and width options 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
    ],
    // ...
})

The container option 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 widget relative to a specific element, use the position option:

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
    ],
    // ...
})

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

See Also