0

I am using jquery.printElement.js to print a calendar table i have created. It is inside a div, and it works mostly as expected. I am having great trouble with my CSS though. As described in my earlier question My cells expand to fit the content, even though I am passing the .css files along.

I have also tried to add table-layout: fixed;, white-space: nowrap; and overflow:hidden; every possible place I can think of. Even as an additional parameter in printBodyOptions:

function printCalendar(){
     $('#printable').printElement({
          overrideElementCSS:['../css/calendarstyle.css',
                              '../css/colorbox.css',
                              '../css/buttonstyle.css'
                              ],
    printBodyOptions:{
        styleToAdd:
                'table-layout:fixed; 
                 overflow:hidden; 
                 white-space: nowrap; !important;'
        }
    });
}

I am out of ideas, and I kinda hope there is a way to print my calendar as an image, from screenshot, or similar. So that all of the already presented proportions apply to the printed calendar, as well as the presentation on screen. Does anyone know of a way to do this? Are there other, better solutions?

Community
  • 1
  • 1
jumps4fun
  • 3,994
  • 10
  • 50
  • 96

1 Answers1

0

have you tried a style sheet dedicated to print ? 

@media print {
/* overrides here commun CSS with higher selector or !important rules */
}

else you have white-space: nowrap; !important;' ,a syntax error here :), should be : white-space: nowrap !important;'

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • no idea if you used my comment and pen linked in your other post : i put here again http://codepen.io/anon/pen/FkcJz (text-overflow ellipsis as well inside ) – G-Cyrillus Mar 26 '14 at 11:55
  • `@media print` does absolutely no change to my print preview or output. Neither does removing the syntax error. I have also tried to remove the `overrideElementCSS:[]`, which gave me the totally unstyled white table. In ither words it did not use any of the styles defined in `@ media print` – jumps4fun Mar 26 '14 at 14:03
  • somehow , you need to find out where style applied are from (bootstrap :) , javascript , style sheet declared after media print ? ) and heavely overrides theses painfull rules .not enough code/info , to find out from your code here in my HO :) – G-Cyrillus Mar 26 '14 at 14:06
  • I know that I am not to good at providing code here. I am looking into copying the stylesheet for the table, and adjusting it to another file, where I keep my printstyle. That way I can guarantee that there are no parent dependencies missing, or overriding or whatever, and test from that. For now I have a problem with my server, which slows my testing down, but I'll make sure to update on my progress. It does not seem that anyone knows a way to print as a snapshot from the browser, as I was hoping for. :-) – jumps4fun Mar 26 '14 at 14:24
  • you could use a library to convert your table into pdf, and print it from pdf ;) wich is perfect for print – G-Cyrillus Mar 26 '14 at 14:29