CODEWITHSUNDEEP
htmlcssprintingstyling
DaRoGa
DaRoGa

Reputation: 2404

CSS styling lost when printing

I have a page which contains charts etc for statistics which must be printable. I want to just use the standard browser print functionality in order to enable printing. I also have css which changes the button colours for selected buttons to make it clear which charts are being viewed. However, my issue is that when i attempt to print the page, this colouring is lost and reset to its default presentation.

I am aware of the capabilities of doing this in Chrome by using webkit-print-color-adjust settings in the CSS, however, the vast majority of users in my business use IE or Edge (as they are microsoft defaults) and therefore i need a solution which would work in them.

I have attempted using !important and @media print but to no effect as yet, unless i am using them wrong.

Here is the css currently:

@media print{
    .btn-primary-chart:active,
    .btn-primary-chart.active {
        color: #ffffff;
        background-color: green !important;
        border-color: #285e8e;
    }
}

Any help would be greatly appreciated :)

Upvotes: 5

Views: 9904

Answers (6)

Andrew Truckle
Andrew Truckle

Reputation: 19087

Actually it is possible to programmatically change the background printing setting for IE:

void CMeetingScheduleAssistantApp::SetPrintBackgroundSetting(CSettingsStore& regSettings, CString strPrintBackground, BOOL& rbResetDefault, BOOL& rbReset)
{
    rbResetDefault = FALSE;
    rbReset = FALSE;

    // Attempt to read the registry key value
    if(regSettings.Read(_T("Print_Background"), strPrintBackground))
    {
        // Update registry key value if we need to
        if (strPrintBackground != _T("yes"))
        {
            regSettings.Write(_T("Print_Background"), _T("yes"));

            // Remember, reset it back to original value afterwards
            rbReset = true;
        }
    }
    else
    {
        // User accepted default behavior, so create registry key value
        regSettings.Write(_T("Print_Background"), _T("yes"));

        // Remember, reset it back to default value afterwards
        rbResetDefault = true;
    }
}

void CAvailableBrothersReportPreview::OnButtonPrintPreview() 
{

    CSettingsStore regSettings(false, false);

    if (regSettings.Open(_T("SOFTWARE\\MICROSOFT\\Internet Explorer\\Main")))
    {
        CString strPrintBackground;
        BOOL bResetValue = FALSE, bResetResetDefault = FALSE;

        // Try to revise the Print_Background setting
        CMeetingScheduleAssistantApp::SetPrintBackgroundSetting(regSettings, strPrintBackground,
            bResetResetDefault, bResetValue);

        // Now show the print preview dialogue
        if (m_pHtmlView != nullptr)
            m_pHtmlView->DoPrintPreview();

        // Reset the Print_Background setting if required
        if (bResetValue)
            regSettings.Write(_T("Print_Background"), strPrintBackground);
        else if (bResetResetDefault)
            regSettings.Write(_T("Print_Background"), _T("no"));
    }
}

Upvotes: 0

Glenn
Glenn

Reputation: 5342

Worth mentioning here, since I had a similar problem, is that EDGE will render SVG properly while ignoring the HTML background-color.

So instead of using:

<div style="background-color:red; width:20px height:20px">...</div>

You can use something like this:

<svg style="width:20px;height:20px">
    <rect width="100%" height="100%" style="fill:red">
</svg>

Upvotes: 0

Weifeng
Weifeng

Reputation: 799

Please try adding "!important" on the style (but not in the @media print).

I just met the problem that font color was missing in print view, and the final solution is replace

color: red !;

with 

color: red !important;

in the style.

It seems that some styles will be ignored if "!important" is not used.

Upvotes: 2

hisenberg
hisenberg

Reputation: 167

I found one solution that will even work in the EDGE browser. Here is the basic HTML:

<div style="position: relative;width:100%">
     <div style="border-color:green;border-style:solid;
         border-width:15px;width:70%;"></div>
     <div style="position: absolute; top: 50%; 
                transform:translateY(-50%);left: 0px;">
         Hello, world.
     </div>
 </div>

You can adjust the width or the parent and the child div's as necessary.

Upvotes: 0

Panda
Panda

Reputation: 6896

There isn't any foolproof method to print backgrounds in Internet Explorer and Microsoft Edge yet. However, there's a few methods I've tried before and may work under some circumstances:

Method 1 (using sprite):

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffad‌​a', endColorstr='#fffada')";

Method 2:

CSS

.background:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    border-bottom: 1000px solid #eee;
 }

HTML

<body class="background">

But if you want to print it yourself, you can enable 'Print Background Color':

To resolve this behavior, turn on the Print background colors and images option in Internet Explorer. To do this, follow these steps:

  1. On the Tools menu, click Internet Options, and then click the Advanced tab.

  2. In the Settings box, under Printing, click to select the Print background colors and images check box, and then click OK.

Also, a few similar StackOverFlow Posts

Upvotes: 3

user5404864
user5404864

Reputation:

From the SO answer here, the reason why your CSS does not work is because of the default settings in the browser print settings.

With Chrome and Safari, you may want to add in

-webkit-print-color-adjust: exact;

to force print the background color.

Upvotes: 4

Related Questions