List of calendars is occluded

  • Resolved bryanhiggs

    (@bryanhiggs)


    1 year, 3 months ago

    I am trying to use an Add to Calendar WordPress block within a page in my WordPress website. I have placed it inside a Cover block, and then inside a Row block so I can center it inside the Cover block.

    However, if you hover over it, you will see that the dropdown list is occluded, presumably because its z-index is lower than the outside of the Cover. It is cut off, without displaying all the items. (I have selected all the options available in the block’s settings.)

    I have tried setting the z-index of the block, and also tried to figure out how to set the dropdown list to be scrollable, without any luck.

    Incidentally, if I change the listStyle to overlay, it, too, is occluded.

    How can I fix this problem, ideally so that the dropdown list does not get occluded?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Jens Kuerschner

    (@jekuer)

    Hi @bryanhiggs ,

    The latest update (1.3.3) optimizes this behavior.
    There might still be cases, where this is not enough – we are working on a “brute-force” option for that too.

    Would be cool, if you could test the release to see if it fixes your issue here already. Thanks!

    Thread Starter bryanhiggs

    (@bryanhiggs)

    Unfortunately, it doesn’t seem to help. The page https://experiments.souheganvalleychorus.org/out-next-concert/ is running on a site that has Version 1.3.4 of your plugin installed.

    The drop-down list is still occluded.

    Thread Starter bryanhiggs

    (@bryanhiggs)

    By the way, I appreciate your efforts!

    Plugin Contributor Jens Kuerschner

    (@jekuer)

    Then you might want to wait on the brute-force feature.

    If you cannot wait, the problem with your page is the following:

    The block where the button is put in has the css overflow:hidden defined. This basically cuts all elements off, which flow over the box. If you remove that, the button works fine.

    The intended brute-force (if it works out as planned) would also workaround this. But fixing the css on the surrounding elements would be the cleaner approach for you in any way.

    Thread Starter bryanhiggs

    (@bryanhiggs)

    I added a CSS class to the Cover block, and added ‘overflow:visible;’ to that class in the Customizer. That, indeed, fixed it.

    But I’m not sure whether that would be a problem for a WordPress block editor Cover block to work correctly. In this case, it doesn’t seem to be a problem, but there may be other scenarios where it might be. I’m not privy to their design constraints.

    So, I’ll await your ‘brute-force’ solution. (I’m curious to know what that technique might be). This website is only a testing/staging website, so it’s not critical for that.

    Plugin Contributor Jens Kuerschner

    (@jekuer)

    With the latest version 1.4.0, you now also have the option “forceOverlay”. Simply add this to the config.

    It is the mentioned “brute force” approach, which can be used, if you are not able or allowed to change the structure of your HTML, which would be the cleaner and more stable approach.

    Alternatively, the modal listStyle is also always a good solution ?? .

    Thread Starter bryanhiggs

    (@bryanhiggs)

    I have version 1.4.1, undid my previous workaround, set the forceOverlay attribute, and Voila! It worked!

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘List of calendars is occluded’ is closed to new replies.