Popup is scrolled to the end

Popup is scrolled to the end

Posted by: bosbach on 3 April 2024, 2:59 am EST

• 

  bosbach

  • Post Options:
  • Link
    Copy

  Posted 3 April 2024, 2:59 am EST - Updated 3 April 2024, 3:04 am EST

  Hi,

  I created a Popup to show some log entries.
  
  The entries are rendered with a v-for statement.
  
  If I show the popup alle the content is rendered but the popup is scrolled to the end.
  
  How can I prevent this behavior?

   <wj-popup ref="popupContent" style="width: 60%; max-height: 60vh; overflow-y: auto;" :modal="true" :initialized="initLogPopup" :shown="scrollTop">
       <div>
           <div class="wj-dialog-header">
               Historie
           </div>
           <div class="wj-dialog-body" tabindex="-1">
  
               <div v-if="currentLogEntries.length > 0">
                   <div v-for="log in currentLogEntries" :key="log.id" :class="{'error-log': log.type === 0}">
                       <p><strong>Datum und Uhrzeit:</strong> {{ formatDate(log.date) }}</p>
                       <p><strong>Nachricht:</strong> {{ log.message }}</p>
                       <hr>
                   </div>
               </div>
               <div v-else>
                   <p>Keine Log-Einträge vorhanden.</p>
               </div>
  
           </div>
           <div class="wj-dialog-footer">
               <button class="btn btn-primary wj-hide-ok">OK</button>
           </div>
       </div>
   </wj-popup>

  loadLog: function (id) {
      wjcCore.httpRequest(
          "./api/projects/getLog",
          {
              data: {
                  id: id
              },
              success: xhr => {
                  var resp = JSON.parse(xhr.responseText);
  
                  this.currentLogEntries = resp;
  
                  this.logPopup.show(true, (sender) => {                    
                      if (sender.dialogResult == 'wj-hide-ok') {
                          this.currentLogEntries = [];
                      };
                  });
              }
          }
      )
  },

  

  1336×917 184 KB

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 3 April 2024, 9:11 pm EST

  Hello,

  After the creation of the popup, wijmo focuses on the child of the popup footer element like the ‘ok’ button in your case. That is why the popup gets scrolled to the bottom when it appears. You can observe it by removing the footer element from the template.
  
  Now to prevent this behavior you can create a boolean flag that indicates whether the popup is shown or not. Handle the focus event of the first child of the footer element. If the popup is shown, set the scrollTop of the popup to 0. The flag here is necessary because the logic should be intended to scroll the popup to the top only when it is shown the first time and not when the child element is focused later.

  for example:
  let popupShown = false; // flag
  popup.shown.addHandler((s, e) => {
    popupShown = true;
  });
  
  const scrollToTop = () => {
    if(popupShown) {
      document.querySelector('#mypopup').scrollTop = 0;
      popupShown = false;
    }
  }
  const footer = popup.hostElement.querySelector('.wj-dialog-footer');
  if(footer) {
    footer.firstChild.addEventListener("focus", scrollToTop);
  }

  Please refer to this sample for more understanding: https://stackblitz.com/edit/vue-example-1-dcfh53?file=src%2FApp.vue

  Let me know if you have any further issues.

  Regards