Customizer sidebar accordion buttons 100% height in 6.7

There is already a ticket for this on core trac: https://core.trac.www.ads-software.com/ticket/62335

Great, thank you!

Following because we have this same flaw on our websites.

i have this same problem , how to fix this ?

Same issue, here on multiple sites. Was driving me and my providers tech support nuts.

Same. Very frustrating! Not on multiple sites though.

When going into the browser’s dev tools section of the site that isn’t displaying correctly, I see that the computed height is a follows.

height 1202px

On the working site the following computed height displays.

height 42.6875px

.accordion-section-title button.accordion-trigger {
all: unset;
width: 100%;
height: 100%;
padding: 10px 30px 11px 14px;
display: flex
;
align-items: center;
box-sizing: border-box;
}

A working site has the same above CSS as the one that isn’t–one displays correctly, one does not. The computed height of 1202px doesn’t specify the class that is actually causing that.

As you can see in the ticket linked above, the fix has been integrated into WordPress 6.7.1. So you would only need to update to solve it.

@threadi The issue in the 62335 ticket is a different Customizer issue; that ticket is regarding the width of the sidebar. The issue described in this ticket (the 100% height of the buttons) has not been fixed in 7.6.1 as I and four others (so far) have commented here.

Same here. Both my sites are on 6.7.1. Odd one doesn’t have the behavior and the other does–both on the same version. All caching cleared (DNS/Cloudflare,etc.).

Ah, I see. This is more about this bug: https://core.trac.www.ads-software.com/ticket/62491 – a reproducible scenario is missing there. Can you provide that? I would be happy if you could, for example

• deactivate all plugins
• activate a standard classic theme like Twenty Twenty
• then test whether the problem still occurs with it
• if so, then copy the website report under Tools > Site Health > Info and paste it here

Then I could use the website report to try to recreate this and you would have a scenario that developers could work with.

@cheydesofblack (and also others): please open a separate topic for your issue according to the forum guidelines: https://www.ads-software.com/support/forum/how-to-and-troubleshooting/#new-topic-0 – even if a problem seems to be similar, you are using different technology and therefore it is not the same and might need to be analyzed separately.

ChatGPT said it had to do with the fonts size not being specified but that didn’t fix it so I’m still screwed. Looks so stupid.

This did not fix it but maybe its pointing in the right direction?

Why is the accordion displaying the full height at 100%?AI

Analyzing the prompt

Investigating accordion height and parent properties

The accordion is displaying at full height because its content is exceeding the available space within its parent container. This is due to the accordion’s display: block property, which allows it to expand vertically to accommodate its content. Since the content’s height (9608px) is much larger than the parent’s height (728px), the accordion overflows vertically.

To fix this, you can consider the following solutions:

• Limit the accordion’s height:?You can set a?max-height?property on the accordion to restrict its vertical expansion. This will prevent it from overflowing its parent container. For example:

css

#customize-theme-controls {

max-height: 728px; /* Match the parent’s height */

overflow-y: auto; /* Add vertical scrollbar if content exceeds max-height */

}

Use code snippets with caution

• Change the accordion’s display property:?Instead of?display: block, you could use?display: flex?or?display: grid?and manage the layout of the accordion’s content using flexbox or grid properties. This would give you more control over how the content is arranged and prevent it from overflowing.
• Adjust the parent’s height:?If possible, you could increase the height of the parent container to accommodate the accordion’s content. However, this might not be feasible depending on the overall layout of your page.

I recommend starting with the first solution, limiting the accordion’s height with max-height and adding overflow-y: auto. This is the most straightforward approach and should effectively prevent the overflow issue.

I just installed the “Admin CSS MU” plugin and applied the following CSS to get around it until the core has been updated.

/*** Customizer Fix – WordPress Version 6.7.1 ***/
.accordion-section-title button.accordion-trigger {
height: auto!important;
}

That fixed it on mine. Nice work!

Glad I’m not alone. What I did is height: initial and it fixed the issue temporarily on my end.