Chrome Printing With Bootstrap 3 Not Sizing To Print Window

[stosh15x]

Hi All,

I just recently ran into an issue while trying to print using Chrome. Since the width of the floating table header was being defined during creation it was not resizing correctly when you would open the print screen/overlay. The table would expand well past the width of the page. I also want to note that this issue would only occur if I scrolled down so that the floating table header was active. If I was at the top of the page then there was no issue and the table would resize appropriately.

I had created a print.css to fix Bootstrap trying to print in mobile view. So I new that wasn't the issue and I was getting the correct results if I was at the top of the page.

My Solution:

<script>
(function() {
	var beforePrint = function() {
		$(window).scrollTop(0);
		$('.tableFloatingHeaderOriginal').width('100%');
		$('.tableFloatingHeaderOriginal>tr>th').css({"min-width": ""});
	};
	var afterPrint = function() {
		//console.log('Functionality to run after printing');
	};
	if (window.matchMedia) {
		var mediaQueryList = window.matchMedia('print');
		mediaQueryList.addListener(function(mql) {
			if (mql.matches) {
				beforePrint();
			} else {
				afterPrint();
			}
		});
	}
	window.onbeforeprint = beforePrint;
	window.onafterprint = afterPrint;
}());
</script>