[TIP] Adjusting the Pop-up Window Size in Power Apps Portal / Power Pages

Adjusting the Pop-up Window Size in Power Apps Portal / Power Pages

Introduction

Power Apps Portal, often integrated into Power Pages, is a low-code platform for building responsive websites that can interact with Dynamics 365 backends. Pop-up windows, also known as modals, are a crucial part of user interaction in these portals. However, the default sizes of these windows might not be suitable for all types of content. This article aims to provide in-depth guidance on customizing the size of pop-up windows in Power Apps Portal using two methods: CSS (Cascading Style Sheets) and JavaScript, leveraging jQuery.

Prerequisites

• Basic understanding of HTML, CSS, and JavaScript
• Administrative access to Power Apps Portal Studio or Power Apps Portal Management interface
• Familiarity with Power Apps Portal structure and elements

---

Method 1: Using CSS

Step 1: Identify the Target Class

The first step is identifying the CSS class responsible for the pop-up window's dimensions. In Power Apps Portal, the .modal-dialog class is commonly used for modal pop-up windows.

Step 2: Create or Edit a Web File

1. Navigate to your Power Apps Portal Management.
2. Go to Web Files.
3. Create a new Web File or update an existing one.

Step 3: Add Custom CSS

In your Web File, paste the following CSS code to adjust the width of the pop-up window.

css
.modal-dialog {
  max-width: 80% !important;
  width: auto !important;
}

Step 4: Reference the Web File

Link this Web File in the HTML of the pages where you want the custom pop-up width to be applied.

---

Method 2: Using JavaScript and jQuery

Step 1: Add jQuery to Your Page

Ensure jQuery is included in your Power Apps Portal.

Step 2: Add JavaScript to the Custom JavaScript Section

Navigate to the Custom JavaScript section of a Basic Form or a Form Step in a Multistep Form. Paste the following JavaScript code snippet:

javascript
$(document).ready(function() {
  $(document).on('shown.bs.modal', '.modal', function() {
    $(this).find('.modal-dialog').css({
      width: '100%',
      'max-width': '2000px'
    });
  });
});

Code Explanation

• $(document).ready(...): Ensures the script runs after the HTML document is fully loaded.

• $(document).on('shown.bs.modal', '.modal', ...): Listens for the Bootstrap modal's "shown" event. When a modal is fully displayed, this function runs.

• $(this).find('.modal-dialog').css({ ... }): Targets the .modal-dialog class within the currently shown modal. This class is commonly used for modal pop-up windows in Power Apps Portals. It then applies the following CSS properties:

• width: '100%': Sets the width to 100% of its parent container.
• 'max-width': '2000px': Sets the maximum allowable width to 2000 pixels.

---

Conclusion

Customizing the pop-up window size in Power Apps Portal / Power Pages can enhance the user experience and make your portal more adaptable to different content types. Whether you prefer using CSS or JavaScript, both methods offer a flexible approach to achieve this customization. Feel free to adapt these methods as per your specific requirements.