QuickInfoPopup width

Question

Hi,we are using customized quickInfoPopup using templates to show additional information on the selected event.We have an event with a lot of data on it and would like to show it in the quickInfoPopup.The templates enable us to do this, but we also need to increase the size of the popup to fit all the content there. The popup doesn't adjust it's width, and even though the content is visible, it overflows outside of the popup.How can we set a larger width for the popup window?Example with a table here:https://stackblitz.com/edit/angular-8dtoda-rcmy7z?file=app.component.html

Praveenkumar Narasimhanaidu · Accepted Answer

Hi Jakub, 

Greetings from Syncfusion support! 

We have validated your issue at our end and let you know that we can achieve your requirement though adding CSS like below mentioned code. We have also prepared a sample for your reference which can be viewed from below link. 

https://stackblitz.com/edit/quickinfo-popup-width?file=app.component.css 

[app.component.css] 
 




.e-quick-popup-wrapper { 
  max-width: fit-content !important; 
  min-width: fit-content !important; 
} 
 
Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Praveenkumar.

Jakub Daraz · Answer

Thanks for a quick reply and for the solution.

There is however one problem remaining.

When opening the popup for an event located at the bottom left area of the page, only a small portion of the popup is visible and there is no way to scroll to the rest of the popup or drag the popup somewhere where it can be seen whole.

Is it possible to render the popup in a different location, where its whole content can be seen? Optionally would it be possible to allow the user to drag the popup to a different location?

Thanks,

Jakub

Nevitha Ravi · Answer

Hi Jakub, 

Thanks for your update. 

We have checked your reported issue and let you know that it is not feasible to drag the popup to desired location. You can resolve the issue by setting the width and height of popup in percentage. We have modified the sample in which you can able to see the content of the popup better. 
https://stackblitz.com/edit/quickinfo-popup-width-br1b2y?file=app.component.css  

.e-quick-popup-wrapper { 
  max-width: 50% !important; 
  height: 25% !important; 
} 

Also we have refreshed the position of popup on its open event. 
  eventClick(args: EventClickArgs): void { 
    if (!this.eventAdded) { 
      let popupInstance = (document.querySelector( 
        ".e-quick-popup-wrapper" 
      ) as any).ej2_instances[0]; 
      popupInstance.open = () => { 
        popupInstance.refreshPosition(); 
      }; 
      this.eventAdded = true; 
     

Please get back to us if you need any further assistance. 

Regards, 
Nevitha