Search code examples
javascripthtmlcssvanillajs-datepicker

a Popup element is not scrolling with inner div when overflow

I'm using vanilla-calendar.pro and here is my simple code below:

          document.addEventListener('DOMContentLoaded', () => {
            const calendar = new VanillaCalendar('#calendar', {
                // Settings
                input: true,
                actions: {
                    changeToInput(e, self) {
                    if (!self.HTMLInputElement) return;
                    if (self.selectedDates[0]) {
                        self.HTMLInputElement.innerHTML = self.selectedDates[0];
                        // if you want to hide the calendar after picking a date
                        self.hide();
                    } else {
                        self.HTMLInputElement.textContent = '';
                    }
                    },
                },
                settings: {
                    visibility: {
                    positionToInput: 'center',
                    },
                },

            });
            calendar.init();
          });
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/build/vanilla-calendar.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/build/vanilla-calendar.min.js" defer></script>
        <title>test page</title>
    </head>
    
    <body>
        <h1 style =" font-size: 40px;" >Test Project</h1>

        <div style="height: 50rem; background-color: rgb(182, 142, 215); overflow-y: scroll; display: flex; justify-content: center; flex-direction: column;">
            
            <div style="margin-bottom: 90rem;" > some components 1</div>
            
            <input id="calendar" type="text" placeholder="Choose date" readonly />
            
            <div style="margin-bottom: 90rem;" > some components 2</div>

        </div>
 
      </body>
</html>

My problem is that when you click the input to choose a date and the calendar popup shows up, then when you try to scroll the inner div the popup calendar dose not scroll properly with it!.

I tried to contain it inside a div to see if it works but its not, also tried to set style

position: absolute/ relative or z-index here and there also its not working..

Any help with that please?

Solution

  • The fact is your calendar is placed according to the body, not your elements with scroll. So it's normal your calendar scroll too when you scroll in your div.

    As a workaround, you can place the element inside your scrolling div, using the init action:

    const calendar = new VanillaCalendar('#calendar', {
  // Settings
  input: true,
  actions: {
    initCalendar(self) {
      if (!self.HTMLElement) return;
      var wrapperElement = document.querySelector('#calendar-wrapper');
      self.HTMLElement.classList.add('top-0');
      wrapperElement.append(self.HTMLElement);
      
    }, 
    changeToInput(e, self) {
      if (!self.HTMLInputElement) return;
      if (self.selectedDates[0]) {
        self.HTMLInputElement.innerHTML = self.selectedDates[0];
        // if you want to hide the calendar after picking a date
        self.hide();
      } else {
        self.HTMLInputElement.textContent = '';
      }
    },
  },
  settings: {
    visibility: {
      positionToInput: 'center',
    },
  },

});

    Then add the div wrapper just after your input:

    <input id="calendar" type="text" placeholder="Choose date" readonly />
<div id="calendar-wrapper" style="position: relative;"></div>

    And finally, use a class to set top to 0px, because Vanilla Calendar just allow to work with first init, not every time the calendar is rendered:

    .top-0 {
  top: 0 !important;
}

    You can check result here: https://jsfiddle.net/gf72b34L/2/