Automatically insert a page break after every set of n items to make printing easier

When printing a web page with a list of items, sometimes the items end up appearing garbled across multiple pages. Is there a method to add a CSS class definition after a certain number of items have been added on a page?

The CSS in question would be associated with the page break definition:

.page-break  { page-break-before: always; }

Here is the relevant page code for the repeater:

<asp:Repeater ID="SearchResultsRepeater" runat="server">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li>
            [content]
        </li>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <li class="SystemShaded">
            [content]
        </li>
    </AlternatingItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

Answer №1

<ItemTemplate>
    <li class='<%# (Container.ItemIndex + 1) % 10 == 0? "page-break" : "" %>'>
        <!-- [custom content] -->
    </li>
</ItemTemplate>

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

Mastering the correct application of template language in CSS files

I am trying to serve a CSS file through my url.py file in order to utilize template tags in my CSS. Below is the code I am using: Base.html: <head> ... <link rel="stylesheet" type="text/css" href="/site_media/css/wideTitle.css" /> urls.py: ...

Mastering the Art of Resizing Video Controls: A

https://i.stack.imgur.com/jTgap.png https://i.stack.imgur.com/Exf6Y.png On the initial screenshot, the video player displays normal controls. However, on the same website with identical CSS, the second video player shows different control settings. // C ...

Is it necessary to tidy up unmanaged code once I have acquired an IStorage object from OLE32?

After calling OLE32's StgCreateStorageEx function, I am able to obtain an IStorage object. Here is the declaration: Imports Microsoft.VisualStudio.OLE.Interop <System.Runtime.InteropServices.DllImport("ole32.dll", SetLastError:=True, ...

Unable to hide the mobile menu button

https://i.sstatic.net/5rdYY.pngI am currently working on a fun website project . I am facing an issue with the mobile menu button not disappearing using display:none in Safari on my iPhone when in landscape mode, even though it works fine in Chrome. My g ...

What could be causing my chessboard to not wrap around properly with flexbox?

I have been working on creating an 8x8 chessboard by following this example: https://codepen.io/sammyslamma/pen/gJeOwY .flex-container { display: flex; flex-flow: row; flex-wrap: wrap; ...

Steps to extract the data from a submitted HTML form and save it into a nested document within a Mongoose schema

Mongoose Schema for Contact Information: const addressSchema = new Schema({ street: { type: String, trim: true }, state: { type: String, trim: true , match: [/^[a-zA-Z]{2,}/, 'Please Enter State in a Correct Format']}, zip: {type: Nu ...

Guide on utilizing the History API or history.js to dynamically update the "active" link based on page refreshes and back button presses

Highlighted active links using JS on my website. <script type="text/javascript> $(document).ready(function(){ $("a.nav1").click(function() { $(".active").removeClass("active"); $(this).addClass("active"); ...

Which specific CSS attributes should be applied to create a scroll bar within this table?

Below is the table that I am working with: 'table' I want to ensure that its width remains the same even when the screen size is reduced, and only add a scroll bar to view it. I have already included overflow: scroll; in the container <div> ...

Utilizing Javascript to Open a New Tab from Drupal

I'm attempting to trigger the opening of a new tab when a specific menu link is clicked within a Drupal website. My initial approach was to incorporate JavaScript directly into the content of the page, but unfortunately this method has not been succes ...

Utilizing Three.js in your HTML code

Currently, I am using c9.io as my IDE to write and test code for a website. Despite my efforts to import the code outside of c9.io, it is still not functioning properly. (I am confident that the issue is not with the three.js script itself.) My HTML code c ...

Hover over the image with some padding placed around it to see

I am struggling to figure out how to add padding to my image when hovering over it with Onmouseover. I have tried multiple solutions but none seem to be working. Here is the original code: <img src='/wp-content/uploads/2015/04/img-white.png' ...

The classes from TailwindCSS being passed as props in Next.js are not displaying properly when used within a map

const DummyData = [ { _id: 1, title: "lorem ipsum", desc: " ", cta: "Explore Service", ctaUrl: "/", theme: "#E4F8ED", btnTheme: "#4F9D73", links: [ { ...

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

Guide to making a split background color design using only CSS

Looking for some help in designing a footer for a website with a split color design featuring two overlapping triangles. Any creative ideas are welcome! Thank you! https://i.sstatic.net/stoqy.png I tried to achieve this effect using the following code: ...

A method parameter in an MVC controller can be bound to HTML form properties by following these steps

Struggling to bind a controller post method to a basic HTML form on the view. Trying to understand how to populate the parameter and call the method using form data. Controller method: [HttpPost("addcomment")] public JsonResult AddCommen ...

Struggling with proper vertical alignment using Flexbox and achieving center alignment

I've been using JavaScript for displaying dynamic text and images, but I'm facing some formatting issues. Currently, I'm utilizing display: flex to position the text and image next to each other, but I'm struggling with horizontal alig ...

Full-width Dropdown Menu within a Container with a Maximum Width

Is it possible to make a dropdown menu within a navigation bar open to the full width of the page, even when the parent container has a maximum width of 500px? My attempt to use 100vw resulted in misaligned dropdown elements, and I cannot move the navbar ...

Do I have to cram all the content onto a single page just to use a scroll effect?

I'm currently facing a dilemma as I work on building my portfolio. My goal is to primarily use html5 and css3, along with a bit of js, jquery, and other tools if necessary. Although I am not an expert in web development, I wanted to push myself to cre ...

The text exceeds the maximum width of the table column

Currently, I am working with a table and utilizing the <col> tag to define column widths. However, I have encountered an issue where one of the columns, set at 5% width, contains a title that is 16 characters long, wider than the allocated 5%. As a ...

Enhancing File Uploads with Vuetify

For my Vue.js project, I am attempting to upload a file using Vuetify and then store that uploaded file in my data object. This is the HTML code: <input id="file-upload" type="file" @change="onFileChange"> Within my methods section, I have the fol ...