Printing Fieldsets in Firefox

Printing fieldsets in firefox

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.

Fieldset contents overflow in Firefox

The best thing I can come up with is to put 2 nested divs within the fieldset:

<fieldset style="width:150px" >
    <div style="width: 150px; overflow-x:scroll;">
        <div style="width:200px; height:50px; background:red;">
            Contents...
        </div>
    </div>
</fieldset>

What is breaking my page when printing?

I was able to resolve the issue by removing the fieldset container that you had everything wrapped in.. Having the fieldset element was causing all of the fields to get grouped together, and since they would not all fit on the first page, they were all being pushed to the second page. By removing the fieldset element, I was able to get Firefox to print the first two questions on page 1 identically to Chrome.

It seems this is not a new problem with Firefox and fieldset not playing nice together as I found an old Bugzilla ticket from 2008 which has persisted and is still being commented on in 2014 (link)

If retaining the fieldset is important, I found a solution someone else came up with here (link)

<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>

Firefox thinks fieldset is a form element; Chrome doesn't

I think you'll be better off using IDs:

<form ...>
  <input ... id="q0" />
  <input ... id="q1" />
  <input ... id="q2" />
</form>

So you can write this JavaScript code:

var answers = new Array();
answers[0] = "sample1";
answers[1] = "sample2";
answers[2] = "sample3";
answers[3] = "sample4";
answers[4] = "sample5";
answers[5] = "sample6";

var display = new Array();
for (var i=0;i<6;i++) {
  var user = $('q' + i).value;
  if (user == "")
    display[i] = "You entered nothing.";
  else if (user == answers[i])
    display[i] = "Correct!";
  else
    display[i] = "Wrong. The correct answer is \"" + answers[i] + "\".";
}
alert(display[0] + "\n" + display[1] + "\n" + display[2] + "\n" + display[3] + "\n" + display[4] + "\n" + display[5]);

Your code can receive a lot of improvement, too:

var answers = [ "sample1", "sample2", "sample3", "sample4", "sample5", "sample6" ];

var display = new Array();
for (var i=0;i<6;i++) {
  var user = $('q' + i).value;
  if (user == "")
    display.push( "You entered nothing." );
  else if (user == answers[i])
    display.push( "Correct!" );
  else
    display.push ( "Wrong. The correct answer is \"" + answers[i] + "\"." );
}
alert(display.join('\n'));

---

Related Topics