Place the SVG image in a fixed position on the final page

Attempting to generate an invoice using Razor template and then converting it into a PDF through chromium. The challenge is adding a payment form to the last page in a fixed position.

.svg-container {
            position: absolute;
            top: 12cm;
            left: 0cm;
            left: 0px;
            width: 18cm;
            height: 10cm;
        }

<div class="svg-container">
  <svg>..</svg>
</div>

Following this method, the payment form SVG ends up in the correct place but unfortunately overlaps with the invoice area on the first page.

<div style="position: relative;">  
  <div class="svg-container">
      <svg>..</svg>
    </div>
</div>

When the payment form is placed after the invoice data using this approach, its position becomes variable. One solution could be setting an absolute position with the 'top' property calculated from:

AbsoluteTop = TopOfPage + pages * PageHeigth;

The challenge lies in retrieving the page count within the Razor code and setting the 'top' value dynamically:

WriteLiteral("style =\"top: " + @razorVariablePAges + ";\"")

Within the header section, the following is used:

<span class='totalPages' style="font-family:Arial; font-size:7pt ">

However, accessing this information as a Razor variable proves to be difficult.

Answer №1

I discovered a workaround for the issue at hand. By adding an invisible label with the ID "labelEnd" at the end of the invoice and placing a div element around the payment form with the ID "blankiet," I was able to use JavaScript to determine the top position of the label and set the top position of the payment form using absolute positioning. I am still facing challenges in precisely positioning the payment form, as its placement depends on the height at which each page begins. Is there a more effective solution that involves instructing Razor/Pupetersharp to specify the exact location of the payment form?

<code>        

     <script type="text/javascript">
    window.onload = function () {
    var nextPage = 0;
     //950 - page height in pixels 
     //450 - position of payment form where there is no place to insert payment form on last page.          
    var top = document.getElementById("labelEnd").offsetTop
            + document.getElementById("labelEnd").clientTop;
    if (top % 950 > 450) 
      nextPage = 1
    document.getElementById("blankiet").style.top = (Math.floor(top / 950) + nextPage) * 950 + 460; 

            }
    </script>

</code>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to smoothly fade in elements and slide them up with a delay

Seeking assistance in adding a slideUp effect to my set of posts/divs in Wordpress that currently fade in one by one using jQuery. I want the posts to slide up and fade in simultaneously, similar to this example: where they animate on filter click. I&ap ...

What is the term for the color used to highlight selections in CSS?

After discovering the hex values of default selection colors on various systems and learning about setting text or item colors with CSS3 from this insightful answer, I find myself wondering if it is possible to highlight selections in SVG elements using th ...

How to style a div to center an image vertically with text using CSS

I attempted to vertically align an image next to text within my link. Thus far, I've relied on a background image to achieve perfect vertical centering for the image of my text. CSS .label { margin: 0 0 0 15px; padding: 0; color: #fff; } a.morein ...

Troubleshooting issue with ng-click functionality in AngularJS within an <li> element

When creating a pagination list image with AngularJS, I encountered an issue where the ng-click directive was not working when used in either an <li> or <a> tag. However, it worked perfectly fine within a <button> tag. <div ng-control ...

The animation in my jQuery code is not functioning properly following an AJAX request

My animation is working fine after an initial ajax call, but when the user navigates back to the front page, it doesn't run. I'm new to Jquery and could use some guidance on how to fix this issue. I believe the problem might be related to using ...

Is there a way to showcase SVG and PNG images retrieved from a database simultaneously?

I've encountered an issue with displaying images from the database. While png images are showing up correctly, the svg images don't seem to display at all. public ActionResult GetImage() { // some code here return new FileContentResult(im ...

Creating a personalized mouse cursor using HTML

I am trying to set an image as my cursor inside a div container but I want it to disappear and revert back to a normal pointer cursor when the mouse hovers over any link within that div. Here is my code snippet: var $box = $(".box"); var $myCursor = $ ...

What methods are available to modify HTML content using Node.js?

I am looking to modify the contents of my HTML file (index.html) below: <html> <body> <div id="greeting">Hello world</div> </body> </html> I want to change this using Node.js in the backend. Below is the Node.js cod ...

Tips for resizing the dimensions of two div elements to fit the screen dimensions

Take a look at this template. It's interesting how the left content div and right sidebar divs adjust themselves based on the browser window size, zoom level, or viewing device such as a mobile phone. When viewed on a mobile, only the content div is d ...

Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language ...

Choosing a color while hovering over the navigation bar

I'm trying to modify the color of my navigation bar when hovering over it with the mouse. Currently, it's black but I want it to change to a light grey or white color. What am I missing here? HTML: <!DOCTYPE html> <html> <head ...

Dynamic Navigation - Apply a class if the menu item has subcategories

After successfully creating a navigation menu for desktop, I am now faced with the challenge of resizing the nav to fit mobile and tablet screens. Specifically, I want to add a class of "dropdown" to the top level list item if it contains children on small ...

Utilizing JavaScript to enable a Bootstrap 5 dropdown menu to open on hover for desktop users and be clickable for mobile users

I am currently using Bootstrap 5 to design a website and I'm facing an issue with creating a navbar dropdown. On desktop, I want the dropdown to open on hover and redirect the user to a new page when clicked. However, on mobile devices, I only want th ...

The issue of "TypeError: e.fixers is undefined error for prefixfree on dynamically loaded iframes" is arising

My iframe is loaded dynamically with code to run inside it - it's a code playground with a codemirror instance below. One of the pieces of code that runs in the iframe is the prefixfree.min.js from Lea Verou. When the iframe loads or unloads, I encou ...

The alignment of the Bootstrap Radio white circle is off when adjusting the HTML font size

I'm currently working on a simple web application using Bootstrap for styling. While I really like the overall look of Bootstrap, I've run into an issue with the appearance of my radio buttons when I adjust the font size in my HTML. Here is a sn ...

The file uploader on the HTML page only allows for PNG files to be uploaded

Currently, I am working on an application where I am facing a challenge related to file uploads. Specifically, I have an input field like this: <input id="full_demo" type="hidden" name="test[image]"> I am looking for a way to restrict the upload of ...

unique label for every new form included

For each button click, I am adding a new form. The challenge is having a unique label for every added form. Currently, the label changes for each form. How can I resolve this issue? Any suggestions? HTML: <div id="jointBuyer" class="JointBuyerDive" ...

Step-by-step guide on sorting WordPress posts by a custom field date

I've created an event sidebar section that will only show the next 3 upcoming events. I have successfully set up the custom post type and custom fields, but I am struggling to figure out how to order the posts based on the start date of the events, wh ...

What is the best way to serve React.js files using express and the .sendFile method?

I have been developing with create-react-app. Upon navigating to localhost:3001/test, the HTML is indeed being served. However, only a blank page is displayed because nothing within the id "root" is being rendered. The server code I am using looks like t ...

What could be the reason my JavaScript alert is not functioning properly?

Having some trouble with my form validation using Bootstrap - the alerts aren't showing up when I submit the form. Not all of the alerts have been added yet. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...