Custom print button for calculator

Ask the Community Customization
1

Hi @Max.

i have a CTA Button to print the css results container.
The entire page is still displayed in the print preview. :flushed:
Maybe that would be an approach, but somehow it doesn’t work. Do you think the devs could take a look at it?

<button onclick="window.print()">Print Results</button>

@media print {
    body * {
      visibility: hidden !important; /* All hidden */
    }
    .results__Container-sc, .results__Container-sc * {
      display: block !important; /* show only .result.container */
      visibility: visible !important;
      
    }
    .results__Container-sc {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}
2 Likes
2

I’m on the right track, but not perfect yet. :upside_down_face:

@media print {
[class*="header__Container-sc"],
[class*="form__Container-sc"] {
display: none !important;
    }
[class*="results__Container-sc"] {
  display: visible !important;
  }
[class*="results__Container-sc"] {
  margin-top: -230px !important;
  margin-left: -130px !important;
  }
}
2 Likes
3

Wow, interesting workaround! Many thanks for sharing your wisdom, @Sina :wink:

You’d like to display in the print preview the section with the results only, right?

1 Like
4

yes max

2 Likes
5

Thanks! I’ve double-checked the widget, and it seems that you’ve already adjusted the code to display only results.

Do I get it right, that now everything is working as you wish?

1 Like
6

Hi @Max,

If you think my adjustment is good, then I’ll leave it as it is. :grinning: But I haven’t figured out the problem (the border) yet.

image
image516×528 11.3 KB

2 Likes
7

Hi @Sina :wave:

When I’ve checked the widget, the full title was inside this frame (and it looks this way now), this is why I thought it was done intentionally:

image
image656×852 22.9 KB

image
image606×304 7.27 KB


However, I’ll discuss with the devs if it’s possible to remove the border :slightly_smiling_face:

2 Likes
8

Hi @Max, thank you for your feedback. :upside_down_face:

this is the printscreen in Firefox

grafik
grafik604×318 5.39 KB

and this is Chrome

grafik
grafik610×269 6.67 KB

The frame is still there on the printout with Firefox.

The small frame wouldn’t be the problem, it can stay. Rather, it is the frame of the larger frame.

I have found a solution

[class*="WidgetBackground__Container-sc"] {
  border: none !important;
  box-shadow: none !important;
  }

grafik
grafik658×240 5.38 KB

We now have the whole discussion in the wish list, which is actually about PDF printing. :flushed:
You can still do it as a workaround.

Here is the complete code for printing the result section if anyone wants it.

@media print {
[class*="header__Container-sc"],
[class*="form__Container-sc"],
button {
display: none !important;
    }
[class*="WidgetBackground__Container-sc"] {
  border: none !important;
  box-shadow: none !important;
  }    
[class*="WidgetBackground__Content-sc"] {
  padding: 0px !important;
  margin-top: 0px !important;
  margin-left: 0px !important;
  }
[class*="results__Container-sc"] {
  display: visible !important;
  gap: 10px
  }
}
1 Like
10

Wow, I’ve checked your code, and it works great in your widget, but, unfortunately, it won’t be a universal solution for all users, since the code works only with the specific settings and fields added.

But anyway, thank you so much for sharing your cool workaround with us - that’s much appreciated :wink:

1 Like