Solved

How to enlarge the pop-up window under a button that displays additional information

Forum|Forum|3 years ago
July 27, 2022
4 replies
246 views

+1

Sarka2022

Hello,
I've created a pop-up window in my survey with additional information. However, the window is quite narrow and so the text is difficult to read.
I am aware that the window can be stretcher out by respondents, but is there a code that would allow me to create the window larger in the first place?
Thanks

Sarka ☺️

Best answer by Tom_1842

Sarka2022 Thank you for providing the screen shot of the code you are using. The below CSS is working for me to modify the minimum height and width of the dialogue box that pops up on click. Add the below over in the survey's Look & Feel, adjusting the values as needed:
#SurveyEngineBody > div.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
min-height: 200px !important;
min-width: 400px !important;
}

The below modification to the JS was also working for me to widen the dialogue box:
jQuery("[id*='dialog']" ).dialog({ autoOpen: false, width: 750 });

+28

Tom_1842
Level 8 ●●●●●●●●
Forum|Forum|3 years ago
August 31, 2022

Hi there, if you're still looking for help with this, any chance you can post the code you have put in place and/or a screen shot so it might be investigated further?

Like

S

+1

Sarka2022
Author
Forum|Forum|3 years ago
September 1, 2022

Hi, I've used the code below and adjusted to my project (i.e., just one pop up window, different title). But I can't figure out where in the code I could adjust the size of the window.

Thanks.
Sarka

Like

+28

Tom_1842
Level 8 ●●●●●●●●
Answer
Forum|Forum|3 years ago
September 1, 2022

Sarka2022 Thank you for providing the screen shot of the code you are using. The below CSS is working for me to modify the minimum height and width of the dialogue box that pops up on click. Add the below over in the survey's Look & Feel, adjusting the values as needed:
#SurveyEngineBody > div.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
min-height: 200px !important;
min-width: 400px !important;
}

The below modification to the JS was also working for me to widen the dialogue box:
jQuery("[id*='dialog']" ).dialog({ autoOpen: false, width: 750 });

S