What is the best way to duplicate a specific HTML element within a container div at set intervals, such as every 10 centimeters, based on the height of the container?

My goal is to design a component in Angular that resembles an A4 paper. When the user inputs content, the paper should expand based on a minimum height of 29.7cm.

Please note: The design requires only a single div element to maintain the flow of content across pages during editing.

I want to include page numbers at the bottom of the paper as the user types, updating every 27.9cm. These page numbers should be non-editable within the div.

Is it achievable with just HTML and CSS? Or do I need a new Angular component for this functionality?

The visual representation of the element is shown below:

Your guidance is much appreciated.

View the demonstration on StackBlitz here.

Take a look at how the expected paper layout appears here:

https://i.sstatic.net/Gslhu.png

Note the red page numbers indicating the progression of content entry.

When the content reaches another 29.7cm mark, the element should automatially append subsequent page numbers accordingly.

javascripthtmlcssangular

Answer №1

After reviewing your code snippet, you can enhance the appearance of page numbers within your div with these CSS styles:

div:after {
  content:attr(data-page);
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  color:blue;
}

Additionally, remember to include data-page="1" in your div element's attributes.

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

Leveraging jQuery.ajaxSetup for customizing beforeSend function and modifying outgoing data for AJAX requests

My goal is to develop a universal beforeSend function that modifies the data sent by each jQuery.ajax call. This will allow me to include a custom variable for tracking purposes in every request, regardless of the order they are sent in. For instance, let ...

javascriptjqueryajax

unplug the client from socket.io ID

Is it possible to have a client leave a room using just the socket ID with the io object? io.sockets(specificSocketID).leave('sampleroom'); The documentation mentions using the leave method with the socket, but I am looking for a way to achieve ...

javascriptwebsocketsocket.io

Correctly referencing a variable in a delayed AJAX request is crucial for ensuring the proper execution

I am facing an issue with a function called fetchAlbum. This function sets up a placeholder, sends an AJAX request, and updates the placeholder upon success. Here is the code snippet: function fetchAlbum() { albumCounter++; var albumElement = $(&a ...

javascriptjqueryajax

Discovering the Authentic Page upon Completion of Load using PhantomJS

I am facing an issue while automatically downloading a theme on Wordpress using PhantomJS. The problem arises because the page is not fully evaluated even after it appears to be done loading. When trying to interact with elements on the page, such as clic ...

javascriptwordpressphantomjs

When using a custom AJAX function, make sure that bindings are functioning properly when setting properties within a callback in Ember

I've encountered some unexpected behavior while trying to set an Ember property inside a custom AJAX function callback. The AJAX function is triggered in the route, as seen in the code snippet below. The success callback updates the 'session.aja ...

javascriptajaxember.js

Why does npm/yarn claim that the "license" in my package.json is missing when I have it listed?

Whenever I run yarn install, a warning pops up indicating that there is no license field, despite having defined one as follows: $ jq . package.json { "name": "license-example", "version": "1.0.0", "main": "index.js", "license": "UNLICENSED", " ...

javascriptnode.jspackage.jsonyarnpkg

Is the Javascript framework malfunctioning even though the code is identical to the one on jsfiddle

<html> <head> <meta charset="UTF-8"> <title>Interactive Globe Display using iTowns</title> <style> html { height: 100%; } body { margin: 0; overflow: hidden; ...

javascriptthree.js

Are JQuery functions affected when navigating between pages in smart-tables?

Apologies if this question has been answered before or seems obvious. I couldn't find a solution after searching, and as someone new to web development, I might be going in circles here. Issue: I've integrated the smart-table extension () into ...

javascriptjqueryhtmlangularjssmart-table

jQuery is great at adding a class, but struggles to remove it

When you click on an anchor with the class .extra, it adds the "extra-active" class and removes the "extra" class. However, when you click on an anchor with the extra-active class, it does not remove the extra-active class and replace it with extra. Here ...

javascriptjqueryhtmlcss

Updating variables after making a GET API call in Angular5 using HttpClient

I am facing an issue with a service (referred to as MySharedService) that is utilized by multiple components. Within MySharedService, I invoke another service responsible for making API calls. The JavaScript object in MySharedService is only assigned after ...

angulartypescripthttpangular-http

In Stripe.js, the background color and height of the credit card input cannot be customized

I'm struggling with customizing the appearance of a Stripe credit card input within my Vue.js application. I want to adjust the background color to #f1f1f1 and set the height to 60px, but despite trying both base styles and css, I can't seem to g ...

javascriptcssvue.jsstripe-payments

What is the proper way to implement process.cwd() in an Angular2 Component using TypeScript?

How can I utilize process.cwd() within an Angular2 Component using TypeScript? What needs to be imported? When used in the constructor like so: console.log("Current working directory: ", process.cwd()); an error is displayed: ORIGINAL EXCEPTION: Re ...

typescriptangularprocessdirnamegetcwd

The webpack-dev-server is not being acknowledged

When attempting to run "npm run dev," I encountered a web pack related error stating 'webpack-dev-server' is not recognized as an internal or external command, operable program, or batch file. I have included screenshots of the error from the te ...

javascriptnpmwebpackweb-applications

How can I customize the color of the selected Leaflet GeoJSON FeatureLayer and its border?

Learn how to customize the fill and border color for leaflet GeoJSON layers with the following options. /** * Generates GeoJSON layers and assigns event handlers. */ private createGeoJsonLayer(geodata: any, map: L.Map): L.GeoJSON<any> { c ...

javascriptcssangularleaflet

Using BeautifulSoup to extract text and CSS from HTML pages

Here is an example of HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css" ...

pythonhtmlcssbeautifulsoup

What could be the reason behind ejs not allowing if else statements when the variable is undefined?

I am attempting to replicate a rather simple example from this question here <div <% if (page_name === 'overview') { %> class="menu__menu-overviewPage menu" <% } %> class="menu"> However, when I try it on a ...

javascriptcssnode.jsejs

What could be causing Bootstrap to fail in my fresh Angular project?

Upon creating a fresh angular project, I proceeded to install bootstrap using npm. Once it was successfully installed in my node_modules folder, I added it to my angular.json file. "styles": [ "/node_modules/bootstrap/dist/css/ ...

angularbootstrap-4

Unique design elements can be seen between emulators/cellphones and notebooks

My attempt to create a responsive design resembling a table using vh and vw units for height and width is facing some challenges. The goal was to have 5 rows and 3 columns. Initially, the design looked good on both mobile phones and notebooks with just two ...

htmlcss

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

phphtmlcss

"Learn how to clear an input field using jQuery with this simple guide

I've gone through a few discussions, such as this one and that one, but I'm still struggling to clear the input field after submission. What is the simplest way to achieve this? This is my current approach: $(document).ready(function(){ $(& ...

javascriptjqueryhtml