[Vuejs]-The close button disappears when scrolling is enabled

by

-1👍

It seems that the issue with the close button disappearing when scrolling is enabled in your modal is related to the positioning of the close button. The "position: absolute" property on the close button is causing it to be positioned relative to the closest ancestor with a non-static position, which in this case is the ".base-modal" element.

When you set "overflow-y: auto" on the ".base-modal" element, it creates a scrollable area inside the modal. As you scroll, the content inside the modal moves, but the close button remains positioned relative to the ".base-modal" container, which causes it to move out of the visible area.

To fix this issue, you need to make sure that the close button stays fixed at its position inside the modal, regardless of scrolling. One way to achieve this is by changing the close button’s positioning to "position: fixed" instead of "position: absolute". This will make the close button stay fixed at its specified position relative to the viewport, and it won’t be affected by the scrolling inside the modal.

Here’s the modified CSS for the close button:

.base-modal
  /* Existing styles */
  position: relative
  max-height: 90%
  overflow-y: auto

  &__close
    position: fixed /* Change 'absolute' to 'fixed' */
    top: 20px /* Adjust the top position to your desired value */
    right: 20px /* Adjust the right position to your desired value */
    cursor: pointer
    width: 40px
    height: 40px

    path
      stroke: $light

With these changes, the close button should remain fixed in its position, even when scrolling inside the modal.

Leave a comment