Utilize Bootstrap 4's d-print classes to style your form

After creating a form that allows users to submit online or print and mail, I encountered an issue with the printing functionality. When using a simple JavaScript print command and applying the .d-print-none class to hide all elements except the form for printing, the output was not as expected. The form only filled one page and left a second blank page. I'm wondering if adding another d-print class to the form element or adjusting the height of the form could resolve this issue. Is this a bug or am I overlooking something?

The code for the form is provided below:

<div class="col-lg-7 col-sm-12 d-print-inline-flex h-100 w-100" id="donationForm">
        <div class="card">
          <div class="card-header"><h4 class="text-center">Donation Request&nbsp;Form</h4>
          </div>
          <div class="card-body">
            <form name="donationRequest" id="donationRequest" novalidate>
              <h5>Event Information</h5>
              <div class="form-group">
                <label for="orgName">Name of Organization: </label>
                <input type="text" class="form-control" id="orgName" required placeholder="Name of Organization">
              </div>
        
              <!-- More form fields here -->
              
              <hr>
              
              <h5>Type of Donation Request:</h5>
              <div class="form-group">
                <label class="form-check-inline"><input type="checkbox" value="">&nbsp;Financial Contribution</label>
                <label class="form-check-inline"><input type="checkbox" value="">&nbsp;Auction/Drawing Item</label>
                <label class="form-check-inline"><input type="checkbox" value="">&nbsp;Other</label>
              </div>

              <!-- More form fields here -->
            
            </form>
          </div>
        </div>
      </div>
cssbootstrap-4

Answer №1

Last week, I encountered a problem and managed to resolve it by implementing the following code snippet:

<div id="printbody" class="d-none d-print-block"> /*load elements to print via js*/ </div>
<div class="d-block d-print-none"> /*all my html body with funtionalities*/ </div>

To handle printing on Mozilla, Chrome, Safari, IE, Edge, I utilized the onbeforeprint event like so:

window.onbeforeprint = function () {          
        $("#printbody").html("") 
        $("#printbody").append($("#list1").html())
        $("#printbody").append($("#msg1").html())
        $("#printbody").append($("#things").html())
        $("#printbody").append($("#foo").html())
        $("#printbody").append($("#faa").html())                                                
        if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
            $("#printbody").append($("#flag").html())                                                                                                              
            $("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')                                                              
            $("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
            $("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')  
            $("#printbody").append($("#tmksla").html())  
        } else {
            $("#printbody").append($("#foos").html())                            
        }   
        $("#printbody").append('<div>' + $("#objs").html() + '</div>')
        $("#printbody").append($("#lmsg").html())                        
    }

In cases where iOS does not trigger the onbeforeprint event, I handled it differently using onclick="fillPrint()" as seen below:

function fillPrint() {          
            $("#printbody").html("") 
            $("#printbody").append($("#list1").html())
            $("#printbody").append($("#msg1").html())
            $("#printbody").append($("#things").html())
            $("#printbody").append($("#foo").html())
            $("#printbody").append($("#faa").html())                                                
            if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
                $("#printbody").append($("#flag").html())                                                                                                              
                $("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')                                                              
                $("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
                $("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')  
                $("#printbody").append($("#tmksla").html())  
            } else {
                $("#printbody").append($("#foos").html())                            
            }   
            $("#printbody").append('<div>' + $("#objs").html() + '</div>')
            $("#printbody").append($("#lmsg").html())                        
        }

The issue arises when attempting to print a large element containing multiple sections (div), prompting me to elevate its position in the DOM hierarchy for resolution.

This solution may prove beneficial to others facing a similar challenge.

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

Increasing the size of a card beyond the container using the CSS PRE tag

I am facing an issue with a card on my webpage. It contains a pre tag inside it, which is causing the size of the card to extend beyond its container, resulting in a horizontal scroll bar appearing. How can I make the content within the pre tag scroll hori ...

htmlcss

arrangement of form labels in material-ui

Is there a way to configure the labels in Material-ui + react forms to be displayed beside input fields for better readability? For example: name [input] title [input] instead of name [input] title [input] I have looked through the documentation b ...

cssreactjsformsmaterial-uiformik-material-ui

Does text alignment apply to one tag but not the other?

Hello, I am in the process of creating a basic webpage and encountering some formatting issues. When I apply the style format to one element, it aligns perfectly, but for another element it doesn't seem to be working. I'm certain it's a simp ...

htmlcss

Customize the dimensions of the bootstrap dropdown menu

I have a dropdown feature on my bootstrap second textbox with a lot of content. The issue is that the dropdown overflows and leaks into the textbox located on the left below it. How can I resize it properly to fit within the confines of the drooping textbo ...

javascripthtmljquerycssbootstrap-5

Displaying a Bootstrap button and an input box next to each other

Looking for advice on aligning or arranging a button and input box side by side in Bootstrap without grouping. I've searched online for examples, but they all involve grouping of elements. jsfiddle: https://jsfiddle.net/erama035/p9dagmL3/3/ <div ...

htmltwitter-bootstrapcss

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

javascriptjquerycsstwitter-bootstraplightbox

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...

javascriptjqueryhtmlcssgoogle-chrome

The dropdown menu is currently activated, but not the individual items within it

Is there a way to make the dropdown menu active when I click on an item, specifically making the word Services active? How can this be achieved? <nav class="navbar navbar-light navbar-expand-xl"> <a class="navbar-brand" hre ...

htmlbootstrap-4dropdown

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

csscss-float

Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout: [curtain repeat][left curtain][stage][right curtain][curtain repeat] The left curtain, stage, and right curtain should maintain a ...

htmlcss

How can I use jQuery to create an onClick event that expands text content on the right side of a portfolio

Hi there, I'm attempting to achieve a similar effect as the hover action in my first fiddle. I'd like to use jQuery click/toggle to expand the content instead of displaying it on hover. I've been working with basic addClass using jQuery/CSS ...

jqueryhtmlcss

Struggling to create a basic website design using Flex within Bootstrap 5

As a newcomer to Bootstrap and web development, I am eager to create a simple welcome-page with a specific design in mind. The layout should resemble the image found https://i.sstatic.net/AAEQ4.png. The colors in the image indicate where flex rows could b ...

htmlcssflexboxbootstrap-5

Unable to shift the header menus upwards for proper alignment with the logo

Header with logo I'm trying to align the menu items like Home, etc with the logo, but it seems like the logo is taking up too much space above the menu headers and I'm not sure how to reduce it. I've already attempted using margin-left or r ...

htmlcss

What is the best way to ensure that the body element is as large as the html element?

My goal is to have the body extend as the page size increases. I attempted setting the height of the body to 100% and the height of the html element to 100%, but it didn't produce the desired outcome: In this illustration, blue represents the body an ...

htmlcss

My custom style sheet not taking precedence over Bootstrap styles

Using !important is something I try to avoid as much as possible. When I downloaded Bootstrap 3.0, I made sure to include the call to the .css file AFTER my core style sheet so that any changes I make to elements like .h1, h1{} take precedence over Bootstr ...

htmlcsstwitter-bootstrap-3

What is the correct way to showcase a list of errors below my component?

In my React 16.13.0 and Bootstrap 4 project, I'm looking to show a list of field errors based on a specific variable in my component. The current code I have is as follows: {props.errors && props.errors[props.name] && ( <Form ...

reactjsbootstrap-4iterator

Is there a way to ensure that when displaying information boxes with Bootstrap, the inputs do not get misplaced or shuffled to the wrong location

I have been working on a form that needs to display an alert: https://i.sstatic.net/uGKtG.png When clicking the button next to the input control, an alert should appear. Although the alert is showing correctly, the input controls are shifting to the wron ...

htmlcsstwitter-bootstrap-3

Stylized border on grouped sections

I am facing a design challenge with 2 columns, floated to each side, and I am looking to incorporate a 1px width line separator that extends from the top to the bottom of the longest column. I am avoiding the use of TABLE layouts and I am unsure of which ...

css

What benefits come from dynamically loading and unloading JavaScript and CSS stylesheets?

Introduction: Currently, I am in the process of developing a website that will utilize ajax to change content without refreshing the main frame and images every time. The main frame has its own site.css stylesheet. Query 1: Considering the use of a sing ...

javascripthtmlcssajax

Bootstrap cards have a fixed width and do not wrap

I've been diving into Django and although I'm fairly new to CSS, I managed to put together a page displaying various products using Bootstrap cards. https://i.sstatic.net/xme5m.png It appears that my code should have wrapped these cards pr ...

javascripthtmlcssbootstrap-4