Replace fieldset to div and vice-versa only for printing in firefox

Question

redgarding to this link Printing fieldsets in firefox

I have quite similar issue. I have form, which prints well, but not on firefox.

And my code looks like

<div>
 <div>
  <fieldset ng-disabled="!isDocumentEditable">
   A LOT OF Inputs (like 200) - most of them are table of checkboxes
   And a lot of other controls
  </fieldset>
 </div>
</div>

Now, if document is editable, i want to let the user to edit. If is not - i do not want - it's simple.

But... my form is quite long, and does not go into second page. So i did something like this:

<body onbeforeprint="beforePrintForFirefox()">
  The whole document
</body>
<script>
    function beforePrintForFirefox() {
        var fieldset = document.getElementsByTagName( 'fieldset')[0];
        var div = document.createElement( 'div');
        div.className = "fieldset";
        div.innerHTML = fieldset.innerHTML;
        fieldset.parentNode.appendChild(div);
        fieldset.parentNode.removeChild(fieldset);
    }
</script >

But... it breaks my whole form - i mean when i change fieldset to div - the controls stops to be disabled - becouse i can't set ng-disabled to div.

I tried to make the same function : afterPrintForFirefox - which converts div to fieldset - but i do not think this is good idea.

Here is the question: How to change fieldset to div ONLY for print purposes - not the real HTML document?

Edit: the div.className = "fieldset"; Was my idea to isolate the 'fieldset' div to the other divs. I'm not sure if it is good solution

score 0 · Answer 1 · answered Mar 02 '16 at 13:08

So, here is my solution: i have splitted the whole formula to 3 fieldsets, so if the document gets too long it's still printed in firefox (but on 3 separate fields - so... not so great but acceptable).

Then, i wrote some css to firefox and print, such as disabling some sections, that should not be printed, like:

@media print {
@-moz-document url-prefix() {
    .disableFirefoxPrint {
        display: none;
    }
}

And i format problematic divs with adding .disableFirefoxPrint class.

So, it's not the best solution - but it works.

Edit: The "onbeforeprint" solution was bad idea - becouse it changed my html and broke it.

Replace fieldset to div and vice-versa only for printing in firefox

1 Answers1