JavaScript/jQuery LoadPanel - Resize and Relocate

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

JavaScript
  • $(function() {
  • $("#loadPanelContainer").dxLoadPanel({
  • hideOnOutsideClick: true,
  • height: 300,
  • width: 500
  • });
  •  
  • $("#buttonContainer").dxButton({
  • text: "Show the Load Panel",
  • onClick: function () {
  • $("#loadPanelContainer").dxLoadPanel("show");
  • }
  • });
  • });

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:

JavaScript
  • $(function() {
  • $("#loadPanelContainer").dxLoadPanel({
  • hideOnOutsideClick: true,
  • container: "#container",
  • position: { my: "left", at: "left", of: "#targetElement" }
  • });
  •  
  • $("#buttonContainer").dxButton({
  • text: "Show the Load Panel",
  • onClick: function () {
  • $("#loadPanelContainer").dxLoadPanel("show");
  • }
  • });
  • });

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

See Also