When printing page, Footer and Header Stays

[cyrel.hurboda]

Hi I’m sorta new to bubble. I’m stuck on a part where I print a page and when going to a second page the footer stays on page 1 and 2 without over lapping the first page’s element… any help would be appreciated. Thank you so much!

[geesonofgee]

Can you share a screen shot, what did you mean by overlapping?

[cyrel.hurboda]

[cyrel.hurboda]

thank you so much for replying geesonofgee… like this when I print, the first to third screenshot is the page’s footer overlaps the repeating group’s value

and weirdly when I put a floating group on the last screenshot it doesn’t align anymore… is there something I missed?

[geesonofgee]

Yeah, you should give the RG a bottom margin that’s 10px more than the height of the Floating group. if it doesn’t work, I can give you a free 15min call to rectify it, or you can send a link now am kinda free

[cyrel.hurboda]

Hello geesonofgee sorry for my late reply, I already added 10px on the floating group, turns out it still giving me problem because the value of the RG splits in the middle when printing. I appreciate that you offered me time but unfortunately I can’t right now due to circumstances. Thank you so much for your help!~

[geesonofgee]

No problem, maybe you should do the screen recording and let’s see what’s happening from your end, am not getting the full gist, kindly send a short video demonstrating the issue, that will be better

[cyrel.hurboda]

its been 2 weeks and I figure it out…

I used to a different approach and used JavaScript to manipulate the repeating group and its items instead…

This is the Script used

function preparePrint() {
  var repeatingGroup = document.querySelector('.bubble-element.RepeatingGroup'); 
  var items = repeatingGroup.querySelectorAll('.bubble-element.Group '); 

  if (items.length > 5) {
  
    var page1 = document.createElement('div');
    var page2 = document.createElement('div');

    page1.style.pageBreakAfter = 'always';
    page2.style.pageBreakBefore = 'always'; 
    
    for (var i = 0; i < items.length; i++) {
      if (i === 5) {
                // Clone only the 6th item for the second page
                page2.appendChild(items[i].cloneNode(true)); // Clone the 6th item for the second page
            }
    }
	
    document.body.appendChild(page1);
    document.body.appendChild(page2);
  }
}

window.onbeforeprint = preparePrint;

window.onafterprint = function() {
  var page1 = document.querySelector('div[style*="page-break-after"]');
  var page2 = document.querySelector('div[style*="page-break-before"]');

  if (page1) page1.remove();
  if (page2) page2.remove();


};