CODEWITHSUNDEEP
javascriptcss
Milos
Milos

Reputation: 1858

Use external css or insert style tag to document fragment

I have document fragment which I create dynamically and send to my printer for printing.

var docHtml = document.createDocumentFragment();

var container = document.createElement("div");
container.innerHTML = "<div>" +
                            "Some content goes here" +
                      "</div>";

docHtml.appendChild(container);
var docsToPrint = MSApp.getHtmlPrintDocumentSource(docHtml);

1) I have problem with printing margins and I do not know/where to put my css rule: 

@page { 
    margin:0cm;
}

into my document fragment ?

2) Is it possible somehow to use external css file in document fragment or to insert 'style' tag into fragment with all css rules ?

Upvotes: 2

Views: 1941

Answers (5)

Nuno Bentes
Nuno Bentes

Reputation: 1515

Ok, try to do this:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <!-- Inline Print CSS -->
        <style type="text/css" media="print">
            .test {
                background-color: red;
                width:50px;
                height:50px;
            }
        </style>
        <!-- Inline Print CSS -->

        <!-- OR -->

        <!-- External Print CSS -->
        <link rel="stylesheet" href="path/to/file/print.css" media="print" >
        <!-- / External Print CSS -->

    </head>

        <!-- Injected Content by your Js script -->
        <div class="test">

        </div>
        <!-- / Injected Content by your Js script -->

    <body>

    </body>
    </html>

Upvotes: 1

Nuno Bentes
Nuno Bentes

Reputation: 1515

If so, then the best option you have is just add the css inline. something like:

container.innerHTML = "<div style='width:30px; height:30px; padding:0;'>" +
                        "Some content goes here" +
                  "</div>";

Upvotes: 0

Nuno Bentes
Nuno Bentes

Reputation: 1515

IMO, just create inside a css file (external one) the required rules, and call it in the html head. Then just add the class (according the one you created in your css file) to tthe div you are generating with the javascript code. Its cleaner and easy to use. Exactly as @Koby Douek said. :)

Upvotes: 0

Ronen Cypis
Ronen Cypis

Reputation: 21470

You need to dynamically create a style element and append it to the body. your css rules should be the internal content of this style element.

$("<style type='text/css'> .blue{ background-color:blue;} </style>").appendTo("head");

Upvotes: 1

Koby Douek
Koby Douek

Reputation: 16693

As long as the HTML page you are creating the div inside is linked to your css file, this should not be a problem.

Try this:

container.innerHTML = "<div style='margin:0;'>" +
                            "Some content goes here" +
                      "</div>";

or more elegant:

container.innerHTML = "<div class='nomargin'>" +
                            "Some content goes here" +
                      "</div>";

and in your css:

.nomargin { margin:0 }

Upvotes: 2

Related Questions