2017-10-07 3 views
0

Ich habe eine funktionierende @media print Abfrage in modal. Dann fügte ich ein Diagramm hinzu, das auch eine PRINT-Funktionalität hat. Wenn ich den Ausdruck in der Grafik ausprobierte, wird in Chrome Print Dialog nichts angezeigt. Ich denke das wegen der @media print. Wie kann ich die gleiche Funktionalität von modal in meinem chart hinzufügen?CSS Media Print Query

CSS Media Print:

@media print { 
    @page { 
    size: auto; 
    margin: 3mm; 
    margin-right: 57mm; 
    margin-left: 57mm 
    } 

    body * { 
    visibility: hidden; 
    } 
    #admissionSlip * { 
    visibility: visible; 
    overflow: visible; 
    } 
    #chart * { 
    visibility: visible; 
    overflow: visible; 
    } 
    #mainPage * { 
    display: none; 
    } 
    #printBtn { 
    display: none; 
    } 
    .modal { 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin: 0; 
    padding: 0; 
    min-height: 550px; 
    visibility: visible; 
    /**Remove scrollbar for printing.**/ 
    overflow: visible !important; 
    } 
    .modal-dialog { 
    visibility: visible !important; 
    /**Remove scrollbar for printing.**/ 
    overflow: visible !important; 
    } 
    li { 
    page-break-after: auto; 
    } 

    /* Chart */ 

    .panel { 
    visibility: visible !important; 
    /**Remove scrollbar for printing.**/ 
    overflow: visible !important; 
    } 
} 
+1

Wie wäre es, wenn Sie 'body * {visibility: hidden;}' entfernen? –

+0

@KenjiMukai, es funktioniert auf Diagramm, aber als ich versuchte, den Druck in meinem modalen Teil zu klicken, wurde das Display unordentlich. – Marksmanship

Antwort

0

Ich löste es, indem nicht so gute Idee, aber es tat, was ich brauche.

Ich trenne die css Datei von media print von chart und modal und es auf jeder html-Datei verweisen.

Ich weiß, dass es keine gute Idee ist, und das ist wahrscheinlich keine Best Practice, aber es hat getan, was ich brauchte. Vielen Dank.