CSS Error in Customizer in v6.7-RC2

[domainsupport]

We've noticed that in v6.7 the HTML and CSS for the Customizer has changed whereby the <h3> '.accordion-section-title' elements now contains a <button> element and no longer contains the <span> .screen-reader-text.

I'm sure there's a reason for this change and that's not the issue in itself.

The issue is the CSS from load-styles.php that now sets the width to 100% ...

.accordion-section-title button.accordion-trigger {
width: 100%;
padding: 10px 10px 11px 14px;
}

This makes the new <button> element wider than 100% and should instead be set to either account for the padding with something like width: calc(100% - 24px) or box-sizing: border-box; should be set.

Without this fix the text can spill off the edge of the UI and can't be seen.

Furthermore, when the text is long enough it is shown behind the arrow at the end so actually, the width value should be even smaller such as width: calc(100% - 40px).

Oliver

[joedolson]

Thanks for reporting! We're already tracking this in #62313.

[domainsupport]

Apologies, I didn't see that ticket. I will update with the additional info from this ticket because there is more to it.

Thanks.

[domainsupport]

Patch to resolve the padding issue

[domainsupport]

Launch WP6.3 in the playground. If I access the customizer and apply long text via the browser console, the text overlaps the chevron icon.

[domainsupport]

Have re-opened as ticket #62313 only addresses the overflow issue, not the overlap issue.

Have also uploaded a patch and the screen grab by @wildworks highlighting the issue.

[desrosj]

Re-adding a milestone.

[sainathpoojary]

Overlapping issue in v6.7 (desktop)

[sainathpoojary]

I have tested the pull request for Ticket #62313 on different screen sizes. This patch addresses the issues with overlapping text, scrollbars, and clickability in the Customizer for version 6.7. Here’s what I found:

1. Current 6.7 branch: Without the patch, the buttons in the Customizer have problems with overlapping and overflowing text, as mentioned in the comment above.
2. After applying the PR patch (#62313): The issue is fixed. The text stays within the button, and the clickable areas (including the chevron icon) work properly.

Based on my testing, the PR in #62313 solves both the text overflow and clickability issues. Let me know if any further testing is needed.

[4uglos]

What about height?

.accordion-section-title button.accordion-trigger {height: 100%;}

Solution:
height: auto or remove height property for this selector in CSS file.

[domainsupport]

@4uglos I have tried (and failed) to replicate the issue you've mentioned. However, we have a client who had this exact same problem which they resolved by updating a plugin they use on their site (Spectra to v2.16.4). Perhaps you have something similar going on?

I don't think that your issue is related to this one and, as such, I believe the existing patch is still valid for the bug in question.

[Vishy Moghan]

Replying to domainsupport:

@4uglos I have tried (and failed) to replicate the issue you've mentioned. However, we have a client who had this exact same problem which they resolved by updating a plugin they use on their site (Spectra to v2.16.4). Perhaps you have something similar going on?

I don't think that your issue is related to this one and, as such, I believe the existing patch is still valid for the bug in question.

I have also found the exact same issue as @4uglos. And only on my own site, not on any of the other WP sites I administer. Here is a link to a screenshot of my own customiser panel ​https://i.ibb.co/FBfXd28/My-total.jpg. I have tried all kinds of solutions, including changing themes, disabling all plugins, removing all custom CSS, purging caches on my site and on my server... Nothing has helped. And as I mentioned none of my other admin accounts on the same server, and in one case with the same theme, are showing this error.

[domainsupport]

@vishy-moghan OK, so why are you closing this ticket and not opening your own one? This ticket is for a completely different issue to the one that you mention.

[Vishy Moghan]

Replying to domainsupport:

@vishy-moghan OK, so why are you closing this ticket and not opening your own one? This ticket is for a completely different issue to the one that you mention.

I'm sorry! What do you mean? I did open a new ticket and was directed to this thread by @threadi from your own organisation. And also how is it a totally different problem? From what I see in the screeshot posted here by @4uglos it is precisely the same issue!

[domainsupport]

@4uglos is also posting about a different problem. This ticket is with regards to this specific text overlap issue shown here.

[Vishy Moghan]

Replying to domainsupport:

@4uglos is also posting about a different problem. This ticket is with regards to this specific text overlap issue shown here.

Sorry but really not my problem. As I say I ended up here because your own people redirected me here. I have the same cutomiser issue as the screenshot I sent and the one @4uglos refers to further up in this thread. Also, I reiterate, I did actually open a new ticket because I could not find the issue I am having in the support pages here. So I would appreciate an answer for my issue anyway. If you know where that issue is being discussed/resolved feel free to send me a link to it.

[desrosj]

Because of a few bug reports opened since 6.7 was released, the Core team is evaluating the need for a short 6.7.1 cycle (possibly next week).

To help prepare for this scenario in case it's decided to move forward with that, I'm going to punt this to the 6.7.2 milestone. This issue was not introduced in 6.7, so it now falls outside of the current focus for 6.7.1 as currently defined.

[joedolson]

The patch for #62313 also resolves the overlap issue documented in this issue, so I'm updating the milestone back to 6.7.1.

[joedolson]

In 59409:

Customizer: Fix layout issues in customizer accordions.

Adjust some CSS characteristics in the customizer accordions to avoid a slight horizontal scroll, allow the chevron icon to be part of the clickable control surface, and resolve a pre-existing padding issue allowing overflow on accordion headings.

Follow up to [59224].

Props laurelfulford, wildworks, domainsupport, sabernhardt, rcreators, desrosj, sainathpoojary.
Fixes #62313, #62335.

[desrosj]

In 59420:

Customizer: Fix layout issues in customizer accordions.

Adjust some CSS characteristics in the customizer accordions to avoid a slight horizontal scroll, allow the chevron icon to be part of the clickable control surface, and resolve a pre-existing padding issue allowing overflow on accordion headings.

Follow up to [59224].

Reviewed by desrosj, joedolson.
Merges [59409] to the 6.7 branch.

Props laurelfulford, wildworks, domainsupport, sabernhardt, rcreators, desrosj, sainathpoojary.
Fixes #62313, #62335.

[desrosj]

#62491 was marked as a duplicate.

[ghinamt]

Can anyone give a clear feedback on this issue, most users are facing it, and the support team keep redirecting us from one ticket to another and mention it is a dupilcated issue instead of focsing on giving a clear feedback on the issue!!!

Since the update of wordpress 6.7, the apperance -> custamize page CSS is not correct.. the issue is in hiedght:100; proparity...

we updated to wordpress version 6.7.1 and that did not solve the issue...can anyone give a clear feedback on when this issue will be resolved to close this discussion ...

many thanks

[domainsupport]

@ghinamt I'm afraid that the reason that v6.7.1 didn't fix your issue is because this ticket (and #62313) are not related to your issue. It is just a coincidence that bother issues are CSS related Customizer issues.

Furthermore, as can be seen on ​this support topic, one of the users with the same problem as yours has also discovered it was plugin related (as did one of our clients who had a similar issue).

[Vishy Moghan]

Replying to ghinamt:

Can anyone give a clear feedback on this issue, most users are facing it, and the support team keep redirecting us from one ticket to another and mention it is a dupilcated issue instead of focsing on giving a clear feedback on the issue!!!

Since the update of wordpress 6.7, the apperance -> custamize page CSS is not correct.. the issue is in hiedght:100; proparity...

we updated to wordpress version 6.7.1 and that did not solve the issue...can anyone give a clear feedback on when this issue will be resolved to close this discussion ...

many thanks

Hi
You have an answer from the people here. I can tell you in my case the sidebar of Customiser was messed up and after much testing and so forth I found th culprit in my case was WP Content Copy Protection & No Right Click (premium) plugin. When I disabled it the sidebar came back. I am however not at all sure what your issue may be related to, but I would suggest this plugin only if you use it too.

[ghinamt]

all my plugins are up to date and I have tried deactiviting them all and the same issue presist.

Replying to Vishy Moghan:

Replying to ghinamt:

Can anyone give a clear feedback on this issue, most users are facing it, and the support team keep redirecting us from one ticket to another and mention it is a dupilcated issue instead of focsing on giving a clear feedback on the issue!!!

Since the update of wordpress 6.7, the apperance -> custamize page CSS is not correct.. the issue is in hiedght:100; proparity...

we updated to wordpress version 6.7.1 and that did not solve the issue...can anyone give a clear feedback on when this issue will be resolved to close this discussion ...

many thanks

Hi
You have an answer from the people here. I can tell you in my case the sidebar of Customiser was messed up and after much testing and so forth I found th culprit in my case was WP Content Copy Protection & No Right Click (premium) plugin. When I disabled it the sidebar came back. I am however not at all sure what your issue may be related to, but I would suggest this plugin only if you use it too.

[ghinamt]

I have deactivate all the plugins and the issue still exist, noting that all my plugins are up to date....Replying to domainsupport:

@ghinamt I'm afraid that the reason that v6.7.1 didn't fix your issue is because this ticket (and #62313) are not related to your issue. It is just a coincidence that bother issues are CSS related Customizer issues.

Furthermore, as can be seen on ​this support topic, one of the users with the same problem as yours has also discovered it was plugin related (as did one of our clients who had a similar issue).

[domainsupport]

@ghinamt I'm afraid I cannot help you here. This is not a support forum and your issue is not related to this closed ticket. Sorry.