Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Listbox owerflows when printing from IE

When I print a page with a listbox from IE the content owerflows. This only happens in IE and it's only the actual print, the print preview looks good.

Here's a code sample:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title></head>
    <body>
        <form name="form1" method="post" action="/IePrintTest.aspx" id="form1">
            <select size="4" name="Listbox" id="Listbox">
                <option value="item1">item1</option>
                <option value="item2">item2</option>
                <option value="item3">item3</option>
                <option value="item4">item4</option>
                <option value="item5">item5</option>
                <option value="item6">item6</option>
                <option value="item7">item7</option>
                <option value="item8">item8</option>
                <option value="item9">item9</option>
                <option value="item10">item10</option>
                <option value="item11">item11</option>
                <option value="item12">item12</option>
                <option value="item13">item13</option>
                <option value="item14">item14</option>
                <option value="item15">item15</option>
                <option value="item16">item16</option>
                <option value="item17">item17</option>
            </select>    
        </form>
    </body>
</html>

This renders just fine, but if i try to print this from IE it will look like this:

Image of print

Does anyone know how to fix this. Thanks!

like image 589
Henrik Avatar asked Dec 13 '11 19:12

Henrik


2 Answers

It seems like when printed from IE and size attribute is applied to select, the browser sets a fixed height and does not apply the overflow. I don't have the chance to test on IE as I am using Ubuntu, but can you please try to add a style="overflow: hidden;" to your select element? If it does not work and removing the size attribute is an option, try that as well.

like image 92
Savas Vedova Avatar answered Oct 05 '22 22:10

Savas Vedova


How is the use case for this web page? If it's OK to make the user click a button first to open a print page you could serve a printable version of the content in quirks mode by making the serverscript conditionally add the DOCTYPE.

like image 27
andersand Avatar answered Oct 05 '22 23:10

andersand