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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.