Plugin does not print an element

(@valentinteruggi)

Hi,

I need help with this plugin. We have a questionnaire and based on the answers we show a report that can be printed as well. The problem is that if you check the report, there are progress bars that are not being printed. (click on the print button)

You can go to this link: http://es-prof.delta-cloud.com/self-assessment-tools/ and start any self-assignment, and the report with the button to print will show up at the end. The problem is that the report is printed but not the “progress bars”.

I have this custom code:

@page {
    size: A4;
    margin: 1cm 1.5cm 1.5cm 1.5cm;
}
#assess-report-wrapper {
	display: block;
	background-color: transparent;
	padding: 0;
}
#assess-report-wrapper div, #shortsummary {
	display: block;
}
.elementor-widget-container h3{
	margin-top: 100px;
}

#assess-report-wrapper .elementor-column .elementor-widget-wrap {
	padding: 0;
}
#assess-report-wrapper .list-box-wrapper h3:before {
	content: " ";
    display: inline-block;
    vertical-align: top;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid #111111;
    margin-right: 10px;
}
#assess-report-wrapper ul li, .bar-list-item {
	display: block;
	break-inside: avoid;
 	page-break-inside: avoid;
} 
#assess-report-wrapper ul li .elementor-icon-list-text {
	padding-left: 0!important;
}
#bar-graph-head {
	padding-bottom: 10px;
}
#bar-graph-head, .bar-list-item {
	padding-right: 0;
	padding-left: 0;
}
.detailedReport .elementor-container {
	display: flex!important;
	align-items: center;
	justify-content: space-between;
}
.bar-list-item .elementor-container {
	display: flex!important;
	align-items: flex-start;
	justify-content: space-between;
}
.detailedReport .elementor-container .elementor-column:first-child, .bar-list-item .elementor-container .elementor-column:first-child {
	width: 50%;
}
.detailedReport .elementor-container .elementor-column:last-child, .bar-list-item .elementor-container .elementor-column:last-child {
	width: 45%;
	text-align: right;
}
.bar-list-item .elementor-progress-bar[data-width="20%"] {
  	width: 20%;
}
.bar-list-item .elementor-progress-bar[data-width="40%"] {
	width: 40%;
}
.bar-list-item .elementor-progress-bar[data-width="60%"] {
	width: 60%;
}
.bar-list-item .elementor-progress-bar[data-width="80%"] {
	width: 80%;
}
.bar-list-item .elementor-progress-bar[data-width="100%"] {
	width: 100%;
}

.hide-in-print, .report-message-wrapper, .elementor-icon-list-icon, .elementor-progress-text, .assess-again-btn, #masthead, #colophon, #showdetails, .linkbestcompetency, .linkworstcompetency {
	display: none!important;
}

Please Help
Thanks.

This topic was modified 1 year, 9 months ago by valentinteruggi.
This topic was modified 1 year, 9 months ago by valentinteruggi.

The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

Plugin Contributor twinpictures
(@twinpictures)

1 year, 9 months ago

there are progress bars that are not being printed

The progress bar element is coming from the plugin:
https://mondula.com/multi-step-form/
This plugin has CSS that controls how it is to be printed at various widths.
You can see this by changing the size of the browser window.

However the print css is forcing a width that triggers this stacked progress bar.
As the CSS posted above is quite involved, you might want to override the responsive sizing for your @media print CSS.

It’s a bit advanced, and goes beyond the scope of support for our free plugin. You might reach out to the multi-step-form plugin devs, as it’s their css you’ll need to understand.

Viewing 1 replies (of 1 total)

The topic ‘Plugin does not print an element’ is closed to new replies.