Windows modal window auto resize

Suite and Optimus
#1

Hi all,

I created a modal window (full screen) in Suite 8 and works fine but I was trying to see if it can automatically resize/center itself when a user resizes the browser window… is there a method for this or is it a create your own function to determine the browser x/y coordinates?

Thanks!

#2

You will have to update the window sizes and position manually using the getSzie()/getPosition() and setSize()/setPosition() methods:

1 Like
#3

Hello, I use the following code to check the resize event and update the dhx window sizes and position

window.addEventListener('resize', function(event) {
    dhx.awaitRedraw().then(function() {
        if (dhxWindow) {
            const {width, height} = getSizesWindow(); // this function get sizes from dhxWindow
//            i am using jquery to get window sizes
            const left = ($(window).width() - width) / 2;
            const top = ($(window).height() - height) / 2;

            dhxWindow.setSize(width, height);
            dhxWindow.setPosition(left, top); // centralize dhxWindow
        }
    });
}, true);

Hope it helps you.

1 Like
#4

Hey Douglas…I appreciate the post…

I’m trying to incorporate your function w/ sematik’s suggestions and oddly it works if i hardcode it but as variables or directly inserting (position.left for example) it does not recognize these values. Even if i use parseInt. So, I will tinker w/ it but if you guys have an inkling what the issue may be I’m all ears…I’ll be bacj soo with an update - thanks!

#5

User error with last post…

I ended up just using a centering positioning that I’m happy with but I am considering if adding a css class will do the same …if so I’ll post…

Thanks to Douglas to get me in the right direction:

Example:

<script>

 function openWindow()
   { 
    const dhxWindow = new dhx.Window({
    modal: true,
    resizable: true,
    movable: false,
    title: "A window",
    closable: true,
    footer: true,  
    css: "grid scrollbar"
    
    });

   // .....

   dhxWindow.show();

   window.addEventListener('resize',   function() {centerFullscreenMode(dhxWindow)}, false);
 }


function centerFullscreenMode(dhxWindow)
    {
      const size = dhxWindow.getSize();
      const dhxWindow_width = size.width;
      const dhxWindow_height = size.height;
      const brsWindow_height = window.innerHeight;
      const brsWindow_width = window.innerWidth;
  
      var top_position = (brsWindow_height / 2) - (dhxWindow_height / 2);
      var left_position = (brsWindow_width / 2) - (dhxWindow_width / 2);
            
      dhxWindow.setPosition(left_position, top_position);
    }

</script>


<a href="javascript:openWindow()">Open window</a>
2 Likes
#6

Sorry for the delay, I couldn’t get in the last few days. I’m glad it solved the problem. Hugs.