This topic is locked
[SOLVED]

how to increase the width of a view pop-up window?

7/26/2025 9:20:15 PM
PHPRunner General questions
M
mfriend author

HI Folks:

I have a pretty large view. On the list page I'm only showing about 10 columns. To see all the columns they have to click on the view icon. The problem is the pop-up needs to be wider to fit everything well.

img alt

How do I go about increasing the width of this pop-up?

ChatGPT 7/26/2025

To increase the width of the pop-up in PHPRunner when displaying a view, you can modify the settings in the application. Here’s how you can do that:

  1. Open PHPRunner: Launch your PHPRunner project.


  2. Go to the List Page Settings: Navigate to the list page where you want to adjust the pop-up width.


  3. Edit the View Settings: Find the view icon settings. This is usually located in the list page’s settings or in the "Edit" settings for the specific field that triggers the pop-up.


  4. Custom CSS: If there isn't a direct option to adjust the width, you can use custom CSS to style the pop-up. Here’s how you can add custom CSS:

    • Go to the "Layout" tab in PHPRunner.


    • Look for the "Custom CSS" section.


    • Add the following CSS code to increase the pop-up width:

      .popup-window {
      width: 800px; /* or any width you prefer */
      }



  5. Save and Test: After making the changes, save your project and run it to see if the pop-up width has increased as desired.


  6. Adjust as Needed: You can adjust the width value in the CSS to fit your specific needs.



By following these steps, you should be able to increase the width of the pop-up window in PHPRunner to display all your columns comfortably. If you need further customization, you might want to check the specific class or ID that the pop-up is using by inspecting the HTML elements with a browser's developer tools.

M
mfriend author 7/26/2025

I tried what ChatGPT suggested and nothing changed....

I tried:

.popup-window {
width: 1200px; / or any width you prefer /
}

M
mfriend author 7/26/2025

I was able to find a different post here in the forum for someone that wanted to make their pop-up windown 100%. I added the same code (changing it to px) in the Modify CSS tab.

This worked fine for me:

/ Put your custom CSS code here /

div.modal-dialog.ui-draggable, div.modal-body, div.modal-content.ui-resizable {
width: 1200px !important;
}

Sergey had written in the other post:
This advise applies to both PHPRunner and ASPRunner.NET.

You can add the following code to Style Editor -> Modify CSS section and all popups will have 100% width:

div.modal-dialog.ui-draggable, div.modal-body, div.modal-content.ui-resizable {
width: 100% !important;
}