Monday, January 30, 2012

The Firefox fieldset bug… and a possible workaround

In an ASP.NET MVC application we are building, we have a long list of items inside a form. These items are wrapped inside one <fieldset>tag.
The problem is when we try to print this form inside Firefox only the forms part on the first page gets printed, there is no second page but instead one page with the form sliced.
Turns out that when printing a document, Firefox truncate <fieldset> to one page. This mean that a form with a <fieldset> that would take more than one page in print can not be printed correctly. This is apparently a known bug tracked on bugzilla since 2008 (see bug 471015).
I couldn’t find an ideal solution, in the end I replaced the fieldset by a div and styled it using some css to make it similar.
The original fieldset:
<fieldset>
 <legend>Products</legend>
</fieldset

The alternative:

<div class="fieldset">
   <span class="fieldset">Products</span>
</div>


div.fieldset
{
    border: 1pt solid #755418;  
    padding:10px;
}

span.fieldset
{
    color: #755418;
    font-size: 13px;
    font-weight: bold;
    display:inline-block;
    position:relative;
    top:-20px;
    background-color:#fff;    
}

No comments: