DevExtreme Angular - Resize and Relocate
Specify the height and width options to change the LoadPanel's size:
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:
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.