Button gets pushed to top when opening the dropdown.

  • Resolved popularwebworks

    (@popularwebworks)


    5 months, 3 weeks ago

    Hi, I created a add to calendar button for events that I created with the ‘ACPT’ plugin. I styled the button with custom CSS using the ‘parts’ attribute as shown in the documentation. Everything is working fine with a little issue I am facing.

    When I click on the button to access the dropdown, the button gets pushed up. This also happens when I set the trigger to ‘hover’. It was doing this even before I styled it with custom CSS, so I know it is not a styling issue.

    View post on imgur.com
    View post on imgur.com

    I noticed using the chrome dev tools that when the button is clicked, a div element with id ‘atcb-bgoverlay’ appears that seems to push the button up:

    View post on imgur.com

    Plus, this element also creates horizontal and vertical overflow.

    Upon inspecting the add to calendar buttons in the documentation on the plugin’s website, I found out that this element is actually supposed to be positioned at the top-left corner of the screen. However, in my case, it is being positioned at the top-left corner of the drop down, which is causing all the issues. I cannot use CSS to fix that as the element doesn’t have a part attribute.

    Please let me know how to fix this. Thanks

    • This topic was modified 5 months, 3 weeks ago by popularwebworks. Reason: Images didn't render, so tried a different method of uploading them

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

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

    (@jekuer)

    Hi there,

    Try to use the “forceOverlay”. This should fix it as it renders everything on the very top.

    Thread Starter popularwebworks

    (@popularwebworks)

    Thanks for the reply.

    After using forceOverlay, it fixes the button being pushed up, but then it removes all the custom styling I had as soon as I click the button.

    View post on imgur.com
    View post on imgur.com
    Plugin Contributor Jens Kuerschner

    (@jekuer)

    The problem is, that with this option, the opening button gets rendered in a new context with another parent element. You ::parts selector does no longer match.

    We will push a patch soon to make this easier to handle.

    For the very moment, you could do something like this:

    add-to-calendar-button::part(atcb-button),
atcb-btn-1-modal-host::part(atcb-button) {
}
    Plugin Contributor Jens Kuerschner

    (@jekuer)

    Optimized it with the latest version.

    Check the documentation again, as we added some more explanation there as well. Closing this for now. Feel free to open a new issue if necessary! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.