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

Prig

possible duplicate of Workaround for FF printing fieldset truncated to one page (bug 471015) – Clapboard

Yes, it's a duplicate but these solutions are better. Now the bug is 9 years old and it's still unresolved. – Acedia

Answer 1

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.

Loats

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 :( – Prig

I'd probably do the same thing, to be honest. Who really cares if it's a fieldset or a div? – Loats

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. – Prig

I hope someone's going to bake this bug a cake for its 10th birthday. – Falgoust

@Falgoust 2018 and it shows "Reported:10 years ago"...well...happy birthday!!! – Beauvoir

Still broken in 2024 – Simpleminded

Answer 2

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>

Kidder

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. – Acedia

Here is a JavaScript port so you don't have to do it. – Hanson

Answer 3

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>

Vouchsafe

Answer 4

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);
    })
};

Hanson