Accordion causes content to overflow Columns container in the editor

  • Resolved cmerrick

    (@cmerrick)


    2 years, 7 months ago

    I have a Stackable Columns/Container block with two columns. Below that (not inside the Columns block) I have other content blocks. In the left column I added a series of Accordion blocks. When the blocks are open in the editor, the content overflows the Columns block. This causes the content from the left Column to overlap with the content of the block below it.
    – This is true regardless of what type of block is below the Columns block.
    – This is also true regardless of whether I put the Accordion blocks inside some type of wrapper, like a Group.
    – It’s true whether I use Stackable Accordions or another Accordion block (I tested with the ‘Accordion Block’ plugin.)

    Not only does this make the content hard to read in the editor, it makes it impossible to actually select or edit the overlapped content.

    It seems to work fine on the front end, it’s just the editor where the Column fails to expand to contain the Accordion content. I have Stackable version 3.4.2 and WP version 6.0.1. Thanks for your time.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi there!

    We’ve already gotten in touch via email and are currently investigating this issue.

    Thread Starter cmerrick

    (@cmerrick)

    Hello everyone, OP here letting you know I’ve been working with WP Stackable support on this issue and we have found the cause. From their most recent email to me:

    “You’re right that the issue is with the Content Vertical Align setting, and it seems to happen with any setting (Align Top, Align Center, Align Bottom). We can confirm that this is what’s causing the issue as we were able to replicate it on our end as well. Apologies for missing this and for taking some time.

    We informed our dev team already, and they also filed this issue and marked it as priority. We will be working on a fix for this to release in the upcoming update, but for the meantime, you can turn that setting off first so that the issue won’t persist.”

    Turns out the bug is in the columns settings, not in the Accordion block at all. If you experience this problem look in the individual column “style” settings for Content Vertical Alignment and turn off any alignment setting (at least until the issue is fixed).

    Thanks to the WP Stackable for looking into this and keeping me in the loop.

    it’s working with your solution for now
    thx

    I have this issue, and even after removing any Content Vertical Align setting, the problem persists. Do the Column blocks get poisoned by the setting and have to be deleted and recreated? I checked every column on the page for the setting. None of them have it any longer, but yet I have 5 layers of text on top of each other in the editor. Page looks fine.

    Seems like even after removing any setting from the columns, this blockVerticalAlign attribute persists when viewing the blocks as HTML:

    <!-- wp:stackable/column {"uniqueId":"bce6890","blockVerticalAlign":"flex-start","effectAnimationOut":{},"effectAnimationIn":{},"customAttributes":[],"displayCondition":{}} -->

    Removing it breaks the block.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Accordion causes content to overflow Columns container in the editor’ is closed to new replies.