javascript - IE Zoom Issue - Child div does not expand to parent div width on zoom in/out -
javascript - IE Zoom Issue - Child div does not expand to parent div width on zoom in/out -
scenario: kid div not expanding parent width on zoom. works on chrome. not work in ie.
wanted behavior: expand kid div on zoom in / out parent. achievable css (preferred)? js?
my approach: see here: http://jsfiddle.net/y6oqfljt/3/
html
<div id="content_report" style="width:100%;position:relative;height:500px;background:#cccccc;overflow:hidden;"> <div id="wrapper_report" style="width:100%;position:relative;"> <table id="header_report" style="width:5000px;position:relative;background:#eb5f3a;display:block;border:solid;"> <tr> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">header</th> <th style="border-right: solid">john</th> </tr> <tr> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> <td style="border-right: solid"><input type="text" /></td> </tr> </table> <div id="splitcontent_report" style="position:relative;width:100%;"> <div id="1split_report" style="position:relative;overflow:auto;width:100%;background:#f1f1f1;height:200px;"> <div id="1data_report" style="width:5000px;background:#fefff4;z-index:2;height:25px;"></div> </div> <h1></h1> <div id="2split_report" style="position:relative;overflow:auto;width:100%;background:#f1f1f1;height:200px;"> <div id="2data_report" style="width:5000px;background:#fefff4;z-index:2;height:25px;"></div> </div> </div> </div> js
var scrollleft = 0; $("#1split_report").scroll('scroll' , function(){ scrollleft = this.scrollleft; $("#2split_report").scrollleft(scrollleft); $("#content_report").scrollleft(scrollleft); $('#header_report tr').each(function(){ $(this).find('th').each(function(){ this.style.position = 'relative'; this.style.right = scrollleft + 'px'; }) $(this).find('td').each(function(){ this.style.position = 'relative'; this.style.right = scrollleft + 'px'; }) }) $('#wrapper_report')[0].style.position = 'relative'; $('#wrapper_report')[0].style.left = scrollleft + 'px'; }); $("#2split_report").scroll(function(){ scrollleft = this.scrollleft; $("#1split_report").scrollleft(scrollleft); $("#content_report").scrollleft(scrollleft); $('#header_report tr').each(function(){ $(this).find('th').each(function(){ this.style.position = 'relative'; this.style.right = scrollleft + 'px'; }) $(this).find('td').each(function(){ this.style.position = 'relative'; this.style.right = scrollleft + 'px'; }) }) $('#wrapper_report')[0].style.position = 'relative'; $('#wrapper_report')[0].style.left = scrollleft + 'px'; }); $("#content_report").scroll(function() { scrollleft = this.scrollleft; if(scrollleft > $("#1split_report").scrollwidth) { this.scrollleft = $("#1split_report")[0].scrollwidth; } else if(scrollleft < 1) { this.scrollleft = 0; } else { //$('#wrapper_report')[0].style.position = 'relative'; //$('#wrapper_report')[0].style.left = scrollleft + 'px'; $("#1split_report").scrollleft(scrollleft); $("#2split_report").scrollleft(scrollleft); } }); issues:
when updating inner scrollleft positions, div.style.right transition seems choppy , sluggish.
issues on zoom in , zoom out in ie9 causing content become distorted. content wrapper not expand container on zoom in/out <-- replicate ctrl + f ("john") , zoom in / out.
note: tried above in chrome. zooming in/out works fine in chrome. wrapper div (child) not become distorted.
questions:
what tweaks can create in code increment performance when dragging div , synchronizing 3 scroll bars? any css/js solution can apply wrapper div have adjust on zoom in , zoom out? is there other approach can utilize accomplish above wanted behavior? javascript jquery html css internet-explorer
Comments
Post a Comment