I am having trouble with the CSS and Bootstrap not being applied after printing

Once the submit button is clicked on the initial output page, the CSS styling disappears and only a simple default form page is displayed. This does not meet my requirements. Using inline CSS allows it to work, but external CSS does not. Can someone please assist me? I have attached the code as well as the current output and the desired output.

HTML CODE

<div id="parent">
  <div class="col-md-11 mx-auto">
    <div class="main-title text-center mb-3">RELIEVING LETTER</div>
    <div class="form-row mb-2">
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Date:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvRDate">Resign</label></b>
      </div>
    </div>
    <div class="form-row mb-2">
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Name:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvFullname">Fullname</label></b>
      </div>
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Emp Code:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvEmpID">EmpID</label></b>
      </div>
    </div>
  </div>
  <div class="col-lg-12 mx-auto">
    <hr class="hr-line" />
  </div>
  <div class="col-md-11 mx-auto mb-2" id="rlv-ltr">
    <div class="row mb-5">
      <p>Dear <b><label for="" id="rlvFirstName">firstName</label></b>,</p>
      <div class="col-md-11">
        <p>
          This is to inform you that we are accepting your resignation dated <b><label for=""
              id="rlvRDate1">ResignDate</label></b> and officially releasing you on <b><label for=""
              id="rlvLastDate">RelieveDate</label></b>.
        </p>
        <p>
          Please complete all transition process before your last
          working date.
        </p>
        <p>
          Thank you so much for all your contribution. We wish you all
          the best in your next endeavors.
        </p>
      </div>
      <div class="col-md-11">Thank You.</div>

    </div>
    <div class="col-lg-12 mx-auto">
      <hr class="hr-line" />
    </div>
  </div>
</div>
<div class="row">
  <input type='button' class="btn btn-success btn-sm mx-auto" value='Submit' onclick='myApp.printDiv()' />
</div>

JS CODE

var myApp = new function () {
    this.printDiv = function () {
        // Store DIV contents in the variable.
        var div = document.getElementById('parent');

        // Create a window object.
        var win = window.open(''); // Open the window. Its a popup window.
        win.document.write(div.outerHTML);     // Write contents in the new window.
        win.print();       // Finally, print the contents.
    }
  }

Current Output Before Clicking Submit

Desired Output After Clicking Submit

Answer №1

To customize how the printed material appears, you have the option to utilize the @media print rule within your CSS document.

As an illustration, if you wish to adjust the font size of the printed content, simply insert the subsequent code into your CSS file:

@media print {
  body {
    font-size: 12pt;
  }
}

The coding inside @media print {} is specifically intended for printing purposes.

Answer №2

Here is a method I used to showcase the content of the initial output page within a new window. Within my JavaScript code, I specified the file path of the first output page as a parameter when launching the new window: var win = window.open('index.html')

This is the snippet of my JavaScript code:

var displayContent = new function () {
this.loadAndDisplay = function () {
    // Establish a new window instance.
    var win = window.open('index.html') // The new window opens with 'index.html' displayed inside.
    win.print();// Ultimately, the contents get printed out.
}

}

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

Challenges with displaying content in Bootstrap tabs

I am currently working on the following code: HTML <div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" role="tablist" id="tabs_list"> <li class="nav-item"> <a class="nav-li ...

Issue with spacing in 3x3 photo rollover grid

I am currently working on a 3x3 grid layout featuring image roll overs. Within this layout, the three images on the second row are linked to pages on the website. My goal is to incorporate a 4px padding around all columns and rows, centered at 1024x600 on ...

Submit button remains inactive even after submitting form via ajax request

I have a page with multiple forms on it for a CRM that I am developing and each form is properly named, but I am facing an issue where the submit button remains disabled after making a $.post() request. Here is my universal post handler for form submissio ...

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

Should I fork and customize npm package: Source or Distribution? How to handle the distribution files?

Currently, I am in the process of developing a VueJS web application. Within this project, there is a module that utilizes a wrapper for a JavaScript library obtained through npm and designed to seamlessly integrate with VueJS. However, it doesn't com ...

Sending a 2-dimensional array from JavaScript to the server using AJAX

My JavaScript code involves working with a 2D array. var erg = new Array(); for (var i in val) { erg[i] = new Array(); for (var j in val[i]()) { erg[i][j] = val[i]()[j](); } } However, I encountered an issue where only the 1D array ...

Sharing data between different JavaScript files using Knockout.js

I am working with two JavaScript files named FileA.js and FileB.js. Within FileA.js, there is a function called Reports.CompanySearch.InitGrid: function InitGrid(viewModel, emptyInit) { var columns = [ { name: 'CompanyName', ...

Tips on customizing autocomplete to display results fetched via ajax

I created a basic text box for users to input information. Using AJAX, I send this information to a PHP script to retrieve results. The results are then displayed in a DIV beneath the input box. However, I am struggling to update the autocomplete suggestio ...

What's preventing it from being cached?

So, I have a website (https://illution.dk) and most of my files that are included or linked are returning a "304 Not Modified" header. However, there is one exception: https://illution.dk/include/style.php, which always returns a "200 OK." The headers for ...

The successful loading of tab favicons in the DOM of an angular chrome extension is a triumph, however, explicit XHR requests are unfortunately

I've been immersed in developing a Chrome extension with Angular 5. Successfully, I managed to extract favIconUrls from the tabs API and link them to my popup.html's DOM. The icons are retrieved and displayed without any hiccups. See an example ...

Using Javascript to extract elements from JSON objects

This is the output I receive after executing a script. { "log": { "entries": [{ "startedDateTime": "2020-12-01T08:45:30.123Z", "time": 50, "request": { "method": "GET", ...

Troubleshooting a LESS compiling issue with my Jade layout in ExpressJS

Implementing LESS compilation on the server side using Express was successful, but I faced an issue with jade not recognizing less in layout. Error message displayed in my terminal: if(err) throw err; ^ Error: ENOENT, open '/Users/li ...

Where can variables be found within the scope?

Would it be possible to automatically identify all variables within a specific scope? For example: var localScope = function() { var var1 = "something"; var var2 = "else..."; console.log(LOCAL_SCOPE); }; and have LOCAL_SCOPE return an object ...

A beginner's guide to integrating three.js into your React projects

I am having trouble integrating three.js into my React application. Despite following the basic sample from the three.js documentation, I am unable to load it on the canvas. Initially, I successfully implemented the sample in a vanilla.js sandbox. However ...

A guide to accurately fetching the transform properties of an SVG element within a d3.transition

Currently, I am experimenting with d3 animations using d3.transitions specifically involving circles. Consider the circle animation example below (d3.transition()): animationTime = 500; svg = d3.select('#svg'); // Locate th ...

Error encountered with Three.js SceneExporter due to Uncaught Syntax issue

Recently, I've been attempting to export a three.js scene using the SceneExporter tool. Here is the code snippet I have been working with: var output = new THREE.SceneExporter().parse(scope.renderingEngine.scene); Unfortunately, this has resulted in ...

Sending parameters in SwipeableDrawer in ReactJS using Material UI

This is a demonstration of my SwipeableDrawer from material-ui const sideList = ( </List> <ListItem button component={Link} to="/todos"> <ListItemText primary="Todos" /> </ListItem> </List> ) <SwipeableDrawer o ...

Error Encountered: Invalid Parameter Type when Retrieving Item from AWS Dynamo

I've been facing issues when trying to establish a connection between my ReactJS application and AWS DynamoDB. Despite confirming the correctness of the API key, secret key, and region, I keep encountering an InvalidParameterType error. I have even at ...

Preventing the automatic selection of the initial item in a PrimeNG dropdown menu

While utilizing the p-menu component from PrimeNG in popup mode ([popup]="true"), I encountered an unexpected issue where the first item in the menu is automatically selected and turns gray. Here is the code snippet that I am using: <p-menu #menu [popu ...

Utilizing ReactJS: Expanding my knowledge of updating array object indexes dynamically when removing elements

Currently, I am in the process of creating a to-do list application to improve my skills in working with ReactJS. This is how my initial state looks like: const [listx, setlistx] = useState( [ {id: 0, flavor: 'strawberry', ...