Relationship Field – Add New Window Squished

Several users have reported WordPress 6.3 changed the HTML output to wrap the iframe in a div, which causes the iframe height of 100% to not take effect. Changing the iframe height to something like 95vh would likely resolve it @sc0ttkclark

@pdclark Is this a bug or something I can adjust myself?

@thewildinitiative It is both a bug and something you can adjust yourself.

It’s being tracked for resolution in an update on issue #7132. While waiting for a patch to the core CSS, the following PHP appears to resolve the issue:

<?php

add_filter(
	'admin_head',
	function() {
		global $pagenow;
		if ( in_array( $pagenow, [ 'post.php', 'post-new.php' ] ) ) {
?>
<style>
	.pods-iframe-modal .components-modal__content > div {
		height: 100%;
	}
	/**
	 * The above change causes the modal header to align to the iFrame's center.
	 * This moves it to the top.
	 */
	.pods-iframe-modal .components-modal__header {
		align-items: start;
	}
	.pods-iframe-modal .components-modal__header-heading-container {
		display: block;
	}
</style>
<?php
		}
	}
);

In testing, this occurred on?2.9.19?+?6.3?in cases where the currently edited post object was non-Gutenberg, regardless of whether the linked relationship was a Gutenberg-enabled post type or not.

@pdclark Awesome. Works great. Thx.

@pdclark Actually, I spoke too soon. It opens up the window, but now I can’t click into any of the fields in the iframe. I can tab through them, but I can’t click into them. I made the following adjustment, which works well for my purposes but may need some more work to be universal.

add_filter(
	'admin_head',
	function() {
		global $pagenow;
		if ( in_array( $pagenow, [ 'post.php', 'post-new.php' ] ) ) {
?>
<style>
	.pods-iframe-modal__iframe {
		height: 75vh !important;
}
</style>
<?php
		}
	}
);

Thanks @thewildinitiative. I’m seeing the click issue as well. vh seems like a better approach than % to me. Below is a version that works without !important by moving the override to later in the page:

<?php

add_filter(
	'admin_footer',
	function() {
		global $pagenow;
		if ( ! in_array( $pagenow, [ 'post.php', 'post-new.php' ] ) ) {
			return;
		}
		?>
<style>
	.pods-iframe-modal__iframe {
		height: 75vh;
	}
</style>
		<?php
	}
);

@pdclark That’s working great for me now.

where exactly do I put this php to fix this issue?

The filter is specified in the code, so it can go anywhere WordPress supports extending with PHP. Theme functions.php, a file in wp-content/mu-plugins, or file within a folder within wp-content/plugins if a header comment with Plugin Name: is added, or a snippets management plugin.

awesome. Thank you!! I put it in a snippet and the code works. Thanks.

I’ve fixed this issue in Pods 3.0 which we are prepping for release in the coming days.