Printing fieldsets in firefox

Question

I've been adding some new css to an existing project (using media="print") in the page header. It's going smooth and (for once!) IE is giving nice, expected results, but Firefox does not...

The problem is that I have a fieldset which contains a lot of fields, and Firefox completely refuses (even in the latest version) to allow a page break inside the fieldset. This means anything that doesn't fit on one page is lost...

I've found the bug acknowledged on the mozilla website which has been open for 3 years - https://bugzilla.mozilla.org/show_bug.cgi?id=471015 - but can't find any reasonable workaround...

Any suggestions before I look to remove fieldsets or similar?

Thanks, Dave

possible duplicate of [Workaround for FF printing fieldset truncated to one page (bug 471015)](http://stackoverflow.com/questions/5469569/workaround-for-ff-printing-fieldset-truncated-to-one-page-bug-471015) — outis, May 22 '12 at 00:51
Yes, it's a duplicate but these solutions are better. Now the bug is 9 years old and it's still unresolved. — Pino, Jun 16 '17 at 10:16

score 8 · Answer 1 · answered Jan 09 '13 at 14:11

8

My JQuery solution for FF:

<script type='text/javascript'>
    $(window).bind('beforeprint', function(){
        $('fieldset').each(
            function(item)
            {
                $(this).replaceWith($('<div class="fieldset">' + this.innerHTML + '</div>'));
            }
        )
    });
    $(window).bind('afterprint', function(){
        $('.fieldset').each(
            function(item)
            {
                $(this).replaceWith($('<fieldset>' + this.innerHTML + '</fieldset>'));
            }
        )
    });
</script>

answered Jan 09 '13 at 14:11

Luke Duda

904
9
12

Very nice, it fires even when I open the print preview BUT it loses any attribute of the original fieldset tag: I have a *disabled* fieldset that becomes enabled after printing. – Pino Jun 16 '17 at 10:40
[Here is a JavaScript port](https://stackoverflow.com/a/76534433/1248177) so you don't have to do it. – aloisdg Jun 22 '23 at 17:40

score 4 · Accepted Answer · answered Sep 07 '11 at 15:57

4

As I guessed, it's still broken in the latest Nightly.

You could try to do something similar to IE Print Protector (aka the widely used html5shiv).

http://www.iecss.com/print-protector/#how-it-works

To display elements correctly in print, IE Print Protector temporarily replaces HTML5 elements with supported fallback elements (like div and span) when you print. IE Print Protector also creates a special stylesheet for these elements based on your existing styles; this means you can safely style HTML5 elements by element name in links, styles, @imports and @media. Immediately after, IE Print Protector restores the original HTML5 element to the page, right where you left it. Any references to those elements and any events on those elements will remain intact.

Firefox now supports onbeforeprint.

So, when onbeforeprint is fired, you could change the fieldsets for divs, or something.

I'm not sure how viable this is, and it sure sounds complicated.

answered Sep 07 '11 at 15:57

thirtydot

224,678
48
389
349

Hey, thanks for the input - I reckon I'm going to go for a change to the fieldset, forcing it to be a DIV instead... I wanted to get rid of them anyway :( – Dave Sep 08 '11 at 08:23
I'd probably do the same thing, to be honest. Who *really* cares if it's a `fieldset` or a `div`? – thirtydot Sep 08 '11 at 08:39
Yea, that's my feeling - I've redone the whole thing to use fieldset's only when correct, and grouped everything else using div's and h2's with some clever CSS to get it identical! Thanks for the input. I'll mark this as accepted. – Dave Sep 09 '11 at 08:07
1

I hope someone's going to bake this bug a cake for its 10th birthday. – ben.tiberius.avery Jun 26 '17 at 09:36
@ben.tiberius.avery 2018 and it shows "Reported:10 years ago"...well...happy birthday!!! – Matías Cánepa Apr 27 '18 at 20:48

score 2 · Answer 3 · answered Mar 15 '12 at 14:37

Check out this jQuery hack I just wrote to solve this issue, figured I'd share even though I'm a bit late. You can change "printEnclosure" to an HTML tag I believe and the CSS at the end is obviously optional.

<div id="printEnclosure">
<fieldset>
<legend>TEST</legend>

Test Content goes here...
</fieldset>
</div>

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function()
{
        var i = 0;
        $('#printEnclosure').find('fieldset').each(function()
        {
            i++;
            $(this).replaceWith('<div id="convertedfieldset'+i+'">'+$(this).html()+'</div>');
            $('div#convertedfieldset'+i).css('display','inline').css('text-align','left');
        });
});
/* ]]> */
</script>

score 0 · Answer 4 · answered Jun 22 '23 at 17:40

Since JQuery is not as common nowadays, here is a full JavaScript solution:

window.onbeforeprint = event => {
    document.querySelectorAll('fieldset').forEach(item => {
        item.insertAdjacentHTML("beforebegin", `<div class="fieldset">${item.innerHTML}</div>`);
        item.parentElement.removeChild(item);
    })
};

window.onafterprint = event => {
    document.querySelectorAll('.fieldset').forEach(item => {
        item.insertAdjacentHTML("beforebegin", "<fieldset>" + item.innerHTML + "</fieldset>");
        item.parentElement.removeChild(item);
    })
};

Printing fieldsets in firefox

4 Answers4

Linked