Geek asks and answers

With IE9 multiple overflow during printing

I am having problems with IE9, ignoring selection boundaries when printing multiple selections.

Here's how to recreate the problem:

  • Open IE9 on Windows 7.
  • Go to w3schools multiple edit pages. .
  • Now highlight the options and copy / paste until a long list of duplicates appears.
  • Then remove the size attribute.
  • Click "Edit and click me" to reload the page, and now you have changed your choice in the second panel.
  • Now print the document (even using the XPS viewer).

For me, all parameters are printed on the page, even if only 4 elements are selected for selection. This still happens to some extent if you leave the default “size” attribute set to 2, but it is much more obvious when it is resized or deleted.

Does anyone else experience this? Is this an IE bug? Does anyone know of a workaround?

+3
source share
2 answers

There is no CSS solution for this. Instead, I wrote a small jQuery script that copies the contents <select multiple>to <div>so that it can be printed. Then I applied some CSS to make it look like select, and only show a copy when printing. A.

Script:

//jQuery required
$(function() {
  if(!$.browser.msie) return false;
  $('select[multiple]').each(function() {
    $lPrintableDiv = $('<div data-for="' + this.id + '" />').addClass($(this).attr('class')).addClass('printable');

    //update printable on changes
    $(this).after($lPrintableDiv).change(function($aEvent){
      updatePrintable($aEvent.target);
    });

    //run once on load
    updatePrintable(this);
  });
});

function updatePrintable($aTarget) {
  var $lSelect = $($aTarget);
  var $lSelected = $($aTarget).val();
  var $lPrintable = $('[data-for="'+$aTarget.id+'"]');

  $($lPrintable).width($lSelect.width()).height($lSelect.height());
  $($lPrintable).html('');

  $($aTarget).children().each(function($lElm){
    $lVal = $(this).val();
    $lLabel = $('<label />').text($lVal);
    $lOption = $('<input type="checkbox" />').val($lVal);

    if($(this).is(':selected'))
    $lOption.prop('checked', true);

    $lPrintable.append($lOption).append($lLabel);
  });
}

CSS

.printable {
    border: 1px solid grey;
    display: none;
    overflow: auto;
}

    .printable label {
        display: block;
        font: .8em sans-serif;
        overflow: hidden;
        white-space: nowrap;
    }

    .printable [type="checkbox"] {
        display: none;
    }

    .printable [type="checkbox"]:checked + label {
        background: #3399ff;
        color: white;
    }

@media print {
    select[multiple] { display: none; }
    .printable { display: inline-block; }
    .printable [type="checkbox"]:checked + label { background: grey; }
}

. jsFiddle

+1

More articles:


All Articles