an issue encountered while trying to print a webpage styled with CSS

Users are given the option to print the current page on the website by clicking on a menu element:

<li>
  <a href="#" onClick="window.print()">
    <i class="icon-print"></i>
    Print Page
  </a>
</li>

The page contains a table with buttons in each row that link to another page.

However, when previewing the page, these links appear explicitly:

The menu (javascript) is also visible...

What steps should be taken to resolve this issue?

This is the content of my print.css file:

.header {
    display: none;
}

.page-sidebar {
    display: none;
}

.color-panel {
    display: none;
}

.hidden-print {
    display: none;
}

.footer {
    display: none;
}

.no-page-break {
    page-break-after: avoid;
}

.page-container {
    margin: 0px;
    padding: 0px;
}

.page-content {
    min-height: auto !important;
}

.breadcrumb {
    display: none;
}

Answer â„–1

After conducting my research, I discovered that if the dropdown menu I want to hide when printing is within a list, then the appropriate CSS should be:

.dropdown-menu li {
display: none;
}

To hide links as well:

a[href]:after {
content: none !important;
}

I have successfully implemented this solution :)

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

What steps should be taken to activate eslint caching?

I'm attempting to activate eslint caching by following the instructions in this section of the user guide The command I am using is npm run lint -- --cache=true, and the lint script simply executes a script that spawns esw (which itself runs eslint â ...

An error occurred: TypeError - Unable to access the 'value' property of a null object during a value change

Example ImageCreating a dynamic form where rows and select box options are added dynamically using 'x' and 'i' increment values in two JavaScript functions. The code works fine when the option selected is 0.5, but throws an error Uncaug ...

Thymeleaf: Automating the Adjustment of Content Fragments

In my project using Spring MVC and Thymeleaf, there is a default fragment that sets up the page structure. Here's what it looks like: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/ ...

Retrieving column values from a Datatable is limited to the first 10 rows

Trying to extract the values from column 1. I followed the instructions provided in the datatable documentation: var data = table.column( 0 ).data(); Table setup: var datatable = table.dataTable({ "scrollX" : "100%", "scrollY" ...

What are the steps for sending information to a PHP file and retrieving the outcome with AJAX?

Hey there! I'm looking to send data to PHP, receive the PHP result, and then display the result in an HTML div tag. Could you provide me with a sample code snippet for this? Thank you in advance and please excuse any mistakes in my English. ...

Comparing functions and function issues when using onClick in JavaScript

I have successfully created an Image Element on my web page dynamically using JavaScript. I am now trying to set an onClick event for the newly created image element. However, I am encountering a problem and I cannot figure out why?, This is the code I ...

The 'length' cannot be searched using the 'in' operator

I am experiencing an issue that I can't quite solve. I have come across solutions for this problem, but they all involve methods that don't use AJAX to retrieve data. If anyone can assist me with this, I would greatly appreciate it. Here is the J ...

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

Tips for dynamically updating an input within a shadow DOM using code?

Snippet: https://jsfiddle.net/5zrwdjy7/2/ I'm currently working on automating keystrokes with a script within Cypress, however, the target website I am dealing with utilizes web components as inputs. These input elements are nested inside what is kno ...

Modify the values of an object by utilizing the setter function

How can I utilize the setter method to update existing values of an object and perform mathematical operations? var obj = { set model(object) { //method's logic } }; obj = {x:10, y: 20, p: 15}; obj = { x:10, y: 20, p: 15 set mod ...

Displaying a child component as a standalone page rather than integrating it within the parent component's body

I'm currently working on implementing nested navigation in my website, but I am facing challenges with loading the child component without the need to include a router-outlet in the parent component. This setup is causing the child component's co ...

Is it possible for me to utilize this code for logging in through a dialog box?

Here is the code snippet I have on the client side: <p>Username:</p> <p><asp:TextBox ID="tbUsername" runat="server"></asp:TextBox></p> <p>Password:</p> <p><asp:TextBox ID="tbPassword" runat="server ...

WebApp specifically designed for iPads that mimics the functionality of a swipe

I am in the process of developing a full-screen web application for an iPad that will showcase a series of images in a slider format. The users should be able to swipe between the images and click on one to view it in detail. Below is an example showcasin ...

Overtaking a property in a node_module interface: a guide

I am facing a situation where I need to modify an existing interface property in my custom type declaration file, rather than creating a new one. Despite trying various approaches, such as attempting to omit the property, I have not been successful in ach ...

Tips on how to horizontally center align a div when using the flex direction column technique

In my design, there is a container that consists of both a table and a div. The div has its display property set to flex with the flex-direction as column. I am trying to horizontally center align the div within the container. Below is the code snippet: ...

Is it possible to activate a click event on a v-select component?

I am currently using vue-select and I would like to create a click event when an item is selected from the select list. I attempted to use @change="changedValue" @selected="changedLabel" but it did not work as expected. Vue Select <v-select placeholde ...

What is the reason behind causing the overflow to become visible on the parent anchor when a child anchor is added?

I've been facing a puzzling issue for the past day. I am working on creating a website that resembles Windows 8, where each box represents a list item. The code is more complex than what I have shared here, but the problem seems to be isolated... &l ...

RxJS emits an array of strings with a one second interval between each emission

Currently, my code is set up to transform an Observable<string[]> into an Observable<string>, emitting the values one second apart from each other. It's like a message ticker on a website. Here's how it works at the moment: const ...

Retrieve targeted information from MySql using jQuery AJAX Success

I've got this AJAX code set up to retrieve data from MySQL and display it in the Success block. $.ajax({ type:"POST", url:"index.php", success: function(data){ alert(data); } }); This is my Query $sql ...

Tips on recycling JavaScript files for a node.js API

I'm currently using a collection of JS files for a node.js server-side API. Here are the files: CommonHandler.js Lib1.js Lib2.js Lib3.js Now, I want to reuse these JS files within an ASP.NET application. What's the best way to bundle these f ...