Fix a form view in pop-up

The form layout in Ultimate Member is responsive. Our script updates form styles on the page load and resize to provide the best view for the current screen. The form placed in the pop-up is not visible on page load, so a script can not calculate proper styles. As a result, the form may be invisible or look odd when the popup is open.

This problem may be easily solved if the script that opens pop-up also triggers the "resize" event. Unfortunately not all plugins trigger the "resize" event when pop-up is opened. You should add your custom code that triggers the "resize" event when the button to open pop-up is clicked to solve this issue.

See examples below. This solution uses a button selector for the Elementor pop-up. Change the button selector in the code to use it with another pop-up plugin.

Add the first (JavaScript) code snippet to the JS file included in the site footer or add the second (PHP) code snippet to the file functions.php in the active theme directory.

NOTE: We have created this code example to provide guidance and to make it easier for you to implement this code into your website. However, we are not able to provide any support when it comes to customizing the plugin. If you need help implementing this code, please hire a developer.

A special solution for the Elementor Pro that uses elementor's popup events:

jQuery( document ).on( 'elementor/popup/show', function () {
	setTimeout( function () {
		jQuery( window ).trigger( 'resize' );
	}, 10 );
} );