0

I have Ajax rating control in my aspx page. When I print the page with javascript, the rating control not appearing in the printed page or print preview. Anyone have solution for this? This is my Rating control tag

<ajaxToolkit:Rating ID="rtDriverRating" AutoPostBack="false" runat="server" MaxRating="5" StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star" FilledStarCssClass="FilledStar" ReadOnly="true"></ajaxToolkit:Rating>

This is my Javascript print function:

function printdiv(printpage) {
    var headstr = "<html><head><title></title></head><body>";
    var footstr = "</body>";
    var newstr = document.all.item(printpage).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr + newstr + footstr;
    window.print();
    document.body.innerHTML = oldstr;
    //window.location.reload();
    return false;
}

And this is what I get when inspecting page:

<a href="javascript:void(0)" id="ContentPlaceHolder1_rtDriverRating_A" title="5" style="text-decoration:none"><span id="ContentPlaceHolder1_rtDriverRating_Star_1" class="FilledStar" style="float:left;">&nbsp;</span><span id="ContentPlaceHolder1_rtDriverRating_Star_2" class="FilledStar" style="float:left;">&nbsp;</span><span id="ContentPlaceHolder1_rtDriverRating_Star_3" class="FilledStar" style="float:left;">&nbsp;</span><span id="ContentPlaceHolder1_rtDriverRating_Star_4" class="FilledStar" style="float:left;">&nbsp;</span><span id="ContentPlaceHolder1_rtDriverRating_Star_5" class="FilledStar" style="float:left;">&nbsp;</span></a>

Below is how the rating control appear on page Ajax Rating control on the page

Edit: Adding my css code:

.Star {
    background-image: url(/Content/imgs/images/Star.gif);
    height: 17px;
    width: 17px;
}

.WaitingStar {
    background-image: url(/Content/imgs/images/WaitingStar.gif);
    height: 17px;
    width: 17px;
}

.FilledStar {
    background-image: url(/Content/imgs/images/FilledStar.gif);
    height: 17px;
    width: 17px;
}
Mostafa Wahbi
  • 11
  • 5
  • This seems to be a styles/css problem. I think the stars are background images, have you flag "print background images" in print preview ? – Baro Oct 10 '18 at 09:30
  • Yes the're background images. I enabled background graphics but also did not fix the issue This is my css code .Star { background-image: url(/Content/imgs/images/Star.gif); height: 17px; width: 17px; } .WaitingStar { background-image: url(/Content/imgs/images/WaitingStar.gif); height: 17px; width: 17px; } .FilledStar { background-image: url(/Content/imgs/images/FilledStar.gif); height: 17px; width: 17px; } – Mostafa Wahbi Oct 10 '18 at 09:52
  • I can't try now but I can suggest to you an alternative with font awesome, this is an example: https://codepen.io/jamesbarnett/pen/vlpkh – Baro Oct 10 '18 at 10:10
  • Thanks @Baro . Your answer help me a lot. The missing part was that I have to add no-repeat !important to the background property of the css class – Mostafa Wahbi Oct 10 '18 at 10:45

1 Answers1

1

Issue solved. Thanks to @nuts-n-beer for his answer in the topic How can I force browsers to print background images in CSS? It was because the stars was defined as background. I had to add no-repeat !important to the css background property and then enable printing background graphics. This is my new css

.Star {
    background: url(/Content/imgs/images/Star.gif) no-repeat !important;
    height: 17px;
    width: 17px;
}

If someone knows how to force showing the images without the user enable print background graphics I will be very grateful.

Mostafa Wahbi
  • 11
  • 5