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

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.

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>

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>