htmlprintingpage-breakpage-break-inside

What is breaking my page when printing?


I have a questioner and I don't know why when printing it's creating a break before the first question.

Live demo (link)

enter image description here


Solution

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