Customizer accordion height fills screen

[dhewercorus]

I'm posting a new ticket regarding this issue, as the original ticket I was pointed towards indicates that this should be handled separately and won't be fixed for 6.7.1. Here is the comment on that ticket that describes the issue:
https://core.trac.wordpress.org/ticket/62335#comment:6

The issue is that the height of the accordions in the Customizer fills the entire height (screenshot from above comment):

I am seeing the same issue on all of my company's sites that I try on 6.7 (on staging). There is a support forum post I made here where several others are experiencing the same issue:
​https://wordpress.org/support/topic/customizer-sidebar-accordion-buttons-100-height-in-6-7/

The problem is 'height: 100%;' has been added to '.accordion-section-title button.accordion-trigger'; I think this should be 'height: auto;' to prevent this problem.

[im3dabasia1]

Hey @dhewercorus ,

Thank you for providing the ticket. Could you kindly share the steps to reproduce the issue?

Looking forward to your response.

[samiamnot]

This seems to be a duplicate of https://core.trac.wordpress.org/ticket/62335#comment:6

[dhewercorus]

Hi, thank you for your quick reply!

All of our themes are "classic themes" and we use the customizer to allow users to control certain content. Loading the customizer via a URL like ...

[domain]/wp-admin/customize.php

... will result in the sidebar showing as it does in the screenshot.

The button inside the h3 inside the li element is the element with the height: 100% attribute, when removed or switched to auto that seems to resolve the problem, although I admittedly didn't test this extensively in Edge, Safari, etc.

Also @samiamnot yes this is absolutely a duplicate of that comment, but from the other comments on that ticket, it sounded like this issue would not be fixed there and we would need to create a separate ticket.

[desrosj]

Hi @dhewercorus, welcome to Trac! And thanks for this report!

It's a bit hard to follow, but the issue described in #62335 that you are also describing here was fixed by way of [59409]. The fix will be included in 6.7.1, which is due out tomorrow (21 Nov).

[joedolson]

It's possible that the fix for #62335 will resolve this, but so far I don't have any reproducibility of this bug, so I can't verify it. If @dhewercorus can install the RC of 6.7.1 and check, that would be helpful.

The issue that was reported in #62335 is fixed, but this issue was only raised as a comment on that issue; I closed the issue as fixed because the issue described in the ticket was fixed - this is, as far as I know, a separate issue.

[sabernhardt]

An earlier support forum topic:
​https://wordpress.org/support/topic/customize-page-layout-issue-after-wordpress-6-7-update-large-spaces/

I was able to reproduce the issue with visible PHP error messages breaking the markup (within head), but I doubt that is how everyone else experiences it. Some screenshots show full-height images on the page, though I do not know how that could affect the Customizer panel.

If the button's 100% height is not necessary (for any/all browsers), the CSS rule could be removed instead of switching the value to auto.

[sabernhardt]

#62502 was marked as a duplicate.

[rrvoigt]

Same issue here, bug is still there after updating to 6.7.1.
Seeing this on two of my websites.

We tested this with our provider Cloudways and the issue is certainly WordPress and not plugins (disabled) or theme releated (inactive and set to default 2025).

Please address and provide a fix.

Regards,

[ghinamt]

Hi,

I am facing the same issue on 8 of my websites...

I have open a ticket in this link...but did not reach to any clear feedback:
​https://wordpress.org/support/topic/customize-page-layout-issue-after-wordpress-6-7-update-large-spaces/

Can you please update us on when this issue will be fixed??
as I have updated wordpress to version 6.7.1 and the issue is not fixed

[sabernhardt]

when this issue will be fixed

6.7.2 is not officially scheduled yet, but I think it will be released sometime in December. If you need or want to change the height before then on your site(s), you could try a ​temporary fix (in a custom plugin).

[sabernhardt]

@vishy-moghan mentioned a plugin that prints a style tag in the admin_enqueue_scripts hook. This similar code snippet can reproduce the extra height without PHP or JS errors:

add_action( 'admin_enqueue_scripts', 'sab_print_style_in_admin_enqueue_scripts' );
function sab_print_style_in_admin_enqueue_scripts() {
	?>
<style> body { color: #152; } </style>
	<?php
}

The code could be edited in the plugins and/or themes that do likewise, possibly by changing the hook to admin_head, but I am not aware of any issues the style tag might have caused before 6.7.

[sabernhardt]

removes 100% height

[sabernhardt]

For me, the six buttons available with Twenty Nineteen (and no plugins) remained the same height with or without height: 100%. That was 42.7 (or 42.69) pixels with Windows 10 and the following browsers: Chrome 131.0, Firefox 132.0, Edge 131.0, Opera 114.0, and Vivaldi 7.0.

62491.diff​ needs testing with other browsers and devices.

[frankbiganski]

I wanted to chime-in with my similar experience regarding this issue, which began after either update 6.7.0. or 6.7.1 - not sure which.

At first, I assumed the issue was due to the No Right-Click Pro plugin by WP-Buy.com as when I deactivated the plugin, the menu looked normal.

But a few day later, I'm performing a check on two other websites and noticed the same issue was occurring. Only this time, I attributed the issue to the plugin LearnPress by ThimPress.

After following up with both plugin authors, they stated the issue was with WordPress and that the issue would be resolved in the next update.

Here's a desktop screen recording I did here:
​https://app.screencast.com/FUXvLk09sr0Ia

I am using Total WordPress theme by WPExplorer and the websites are:

​https://thedronecoach.io
​https://thedronecoach.com

Cheers,
Frank

p.s. when I activated Twenty Twenty-Two, I did not have the "Customize" option at Appearance> Customise. Not sure if that is normal or not as I've never used those other WP stock themes.

[sabernhardt]

LearnPress likewise prints a (script) tag with admin_enqueue_scripts. I opened #62629 to consider rearranging the Customizer PHP.

Twenty Twenty-Two and other block themes tend not to use the Customizer because they have the ​Site Editor.

[dhewercorus]

After seeing @frankbiganski's post I did a test and the following code, added to a theme's functions.php file, will reproduce the Customizer height issue (I used Twenty-Eighteen theme on a clean WP install):

function break_customizer_height() {
    ?>
    <style>
    body {
        background: red;
    }
    </style>
    <?php
}
add_action( 'admin_enqueue_scripts', 'break_customizer_height' );

This will result in the <style> tags being added to the <head> which somehow breaks the customizer height. The CSS in the <style> tags doesn't matter, they can even be empty. Not sure why this causes the customizer height issue though.

[redkite]

I disabled all plugins on my site running 6.7.1 with the Site Health and Troubleshooting Plugin, and then tried a number of different themes.

I found that this issue with the customizer height is happening when Kadence, Hello Elementor, GeneratePress or Neve is active. It didn't happen with Twenty Twenty Five, Twenty Twenty Four, Astra, OceanWP or Blocksy. I was using Chrome Version 131.0.6778.86.

[joedolson]

Reproduced the issue and removing height: 100% resolves it. I have been unable to identify any downsides to removing the 100% height. The cause of this bug is pretty murky; it seems to be related to the script/style insertion, but, like others, I'm unclear exactly how that has any impact. Marking this for commit.

[joedolson]

In 59510:

Customize: Remove unnecessary height: 100% on accordion button.

Remove CSS that could occasionally trigger the accordion buttons to be 100% the height of the accordion container.

Props dhewercorus, im3dabasia1, sabernhardt, rvoigt, ghinamt, vishy-moghan, frankbiganski, redkite.
Fixes #62491.

[joedolson]

Reopening for 6.7.2.

[frankbiganski]

I just wanted to say that with 6.7.1, I am still experiencing the issue when using the plugin
"No Right Click Pro" by wp-buy.com on my website ​https://londonestatephotography.co.uk.

I should also point out that my other two websites, thedronecoach.io and thedronecoach.com, which both were experiencing this issue running the LMS plugin LearnPress by Thimpress.com, no longer has the issue.

The LearnPress plugin was recently updated and they were aware of the issue however the plugin by wp-buy.com has not been updated

Best,
Frank B.

[jorbin]

In 59539:

Customize: Remove unnecessary height: 100% on accordion button.

Remove CSS that could occasionally trigger the accordion buttons to be 100% the height of the accordion container.

Reviewed by jorbin.
Merges [59510] to the 6.7 branch.

Props dhewercorus, im3dabasia1, sabernhardt, rvoigt, ghinamt, vishy-moghan, frankbiganski, redkite, joedolson.
Fixes #62491.

[frankbiganski]

Hello,

This issue still exists when using the No Right-Click Pro plugin by WP-Buy.com. I've notified them in the past and I just forwarded them this thread link to chime in.

I can provide another video if needed.

The issue no longer is present with the LearnPress LMS plugin by ThimPress, but they have updated their plugin and were aware of the issue.

Cheers,

Frank

[jorbin]

@frankbiganski Are you testing using the nightly build of trunk or the 6.7 branch? If you are testing using 6.7.1, then it not being fixed is the expected behavior as the fix has not yet been released :). The fix will be included in both 6.8 (targeted for April) and 6.7.2 which is not yet scheduled but I would expect will be released in January.

[frankbiganski]

Hi Aaron,

No, I'm not testing. I'm just a consumer who noticed the issue, trying not to putz things up for you developers. ;)

I shall await for the updates.

And thanks for being so proactive in the continued developments of WordPress. Without WP and my author's theme, I would be at a loss.

All the best!

Frank

[sabernhardt]

#62772 was marked as a duplicate.