OL Learn

Align text at the top of the footer

Hi,

I have a print context where I divided the page into 2 parts with divs:

<div id="invoiceHeader" anchor="page_media_0"
style="width: 756px; height: 516px; top: 0px; left: 0px; position: absolute; padding-right: 38px;" offset-x="0" offset-y="0"></div>
<div id="invoiceFooter" anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 718px; height: 125px; top: 998px; left: 37.8px;" offset-x="37.8" offset-y="998">
</div>

When I want to have a text that is positioned at the top of the footer I could create a div with a style “position: absolute; top: 0px”. This will work as long as I keep the footer div lined up with the margins defined in the Master page.
But there is also the option to resize the margins in a post pagination script.
Is there a way to create a div that aligns perfectly with the footer when I change it in a post pagination script so I can have a block of text that is aligned to the top of the footer when I resize it dynamically?

Thanks

You could adjust the position of your DIV in the same post pagination script on the fly based on the value of your bottom margin.
You could use the merge.context.query("#invoiceFooter") with all the usual Connect Designer API methods and properties such as css(), after(), attr()…etc to manipulate the DIV position accordingly.

Example:

let invoiceFooter = merge.context.query("#invoiceFooter");

invoiceFooter.css('background-color', '#cccccc');
invoiceFooter.text("This is an example text from a post pagination script");
invoiceFooter.css('top', '75mm');

Hi,

This is from old reply but I have concern if my div is relative position, meaning it would go different page depending on the top elements because my pages are dynamic. Footer text should stay on same position whatever page it may sitting. I did try setting the css top position but it’s not working

Thanks