Questions Tags Users Unanswered

page getting cut while printing

Question is open.
1 answer (2 voices) (7126 views)
I want to create html which will dynamically pick up image paths and image description. Please see attached zip (Dummy Scenario).

I am able to display images how I wanted but while printing them they are getting cut. And printing does not go past 1 page. I have used 'div' for the purpose.

Thanks
test_wardrobe.zip (7 KB)
I very much appreciate your help. Thanks. The solution you provided works perfectly fine for Chrome but not in IE9. IE9 does not go beyond page 1. is it problem with 'print_linebreak' in IE9 - Kedar Oak -
I've checked and it works in IE9 on Win 7. IE9 splits the content into multiple pages in the print preview window. - Dottoro -
1 Answer
Hi,

Everything seems to work as expected (the list is broken into pages) in Firefox, Chrome and Opera, but not in Internet Explorer. IE only prints one page and most of the images are missing.

The print CSS media rule allows you to specify the look and layout of the content for print.
For example, if you add these lines into your html file:

1.
2.
3.
4.
5.
6.
7.
<style>
    @media print {
        .div_img {
            float: none !Important;
        }
    }
</style>


the list will be broken into multiple pages in IE, as well.

-----------------------------------

EDIT:

Of course it is possible to have 3-4 or 5 images in one row.
Add a CSS class to every third image (print_linebreak in the example) and use this class to break the line while printing:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
<head>
    <style>
        @media print {
            .div_img.print_linebreak {
                clear: left;
            }
        }
    </style>

    <style>
    div.div_img
    {
        margin: 10px;
        border: 1px solid #cccccc;
        float: left;
        text-align: center;
    }
    div.desc
    {
      text-align: center;
      font-weight: normal;
      font-family:"Arial";
      margin: 2px;
    }
    </style>
    <script type="text/javascript">
        function AddDiv(holderClass) {
        
            var newDiv = document.createElement('div');
            newDiv.className = holderClass;
            var newImg = document.createElement('img');
            newImg.src = "image/missing.jpg";
            newDiv.appendChild(newImg);
        
            var title = document.createElement('div');
            title.appendChild(document.createTextNode("Title Text"));
            title.className = "desc";
            newDiv.appendChild(title);
            
            document.body.appendChild(newDiv);
        }
    </script>
</head>
<body>
     <script type="text/javascript">
        for(var i=0;i<50;i++)
        {
            var holderClass = "div_img";
            if (i % 3 == 0) {
                holderClass += " print_linebreak";
            }
            AddDiv(holderClass);
        }
     </script>
</body>



I hope that helps.
Hello, That was a great help.Now the image is not getting cut and multiple pages are possible But each image is occupying whole row. Is possible to have 3-4 or 5 images in one row? - Kedar Oak -
I've edited my answer. - Dottoro -
15 30 50 per page

Your Answer

Limit of files to attach: 3 / Max total size: 1024 KB
File:
Description:
remove