PageResize plugin goes into infinite loop when using inside Inspinia .ibox in full screen mode
PageResize plugin goes into infinite loop when using inside Inspinia .ibox in full screen mode
a.jacob.g
Posts: 3Questions: 1Answers: 0
I am using the page-resize datatables plugin inside a .ibox-content container which is an Inspinia panel (see: http://webapplayers.com/inspinia_admin-v2.8/tabs_panels.html - the third example on the page, "Example with fullscreen option")
When I click on the icon to make the panel content go full screen the resize page plugin fires the onresize event in an endless loop.
If you save the inspina page referenced above as a starting point and add the following style, js, and .ibox-content HTML to the third .ibox on that page then you will be able to reproduce the issue.
Style:
<style>
/* !!!!!!!!!!!!!!!
Note that I suspect that this is what causes the infinite loop. However, without this the .ibox-content does not expand to consume the entire display area of the screen */
.ibox.fullscreen {
position: fixed !important; /*have to use !important here because of conflict between datatables overwriting inspinia's property */
}
.resize_handle {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.5em;
text-align: center;
font-size: 0.8em;
line-height: 1.5em;
background-color: inherit;
color: #5e5e5e;
}
.resize_handle:hover {
background-color: #1c84c6;
color: white;
cursor: pointer;
}
table.dataTable th, table.dataTable td {
white-space: nowrap;
}
div.dataTables_length {
display: none;
}
.dataTables_wrapper {
padding-bottom: 15px;
}
</style>
JS:
<script>
$(document).ready(function() {
// Event listner to resize the .resize_wrapper container with a mouse drag on the .resize_handle element
//** this is slightly modified from the example to make it work for multiple panels with resizeable datatables on a single page
$('.resize_handle').on('mousedown',function(e) {
var wrapper=$(this).closest('.ibox-content').find('.resize_wrapper');
var mouseStartY=e.pageY;
var resizeStartHeight=wrapper.height();
$(document)
.on('mousemove.demo',function(e) {
var height=resizeStartHeight+(e.pageY-mouseStartY);
if(height<180) {
height=180;
}
wrapper.height(height);
})
.on('mouseup.demo',function(e) {
$(document).off('mousemove.demo mouseup.demo');
});
return false;
});
// DataTables initialisation
var table=$('#demoTable').DataTable({
scrollResize: true,
scrollX: true,
scrollY: 100,
scrollCollapse: true,
paging: false
});
});
// listen for when datatables is done rendering a dt so we can move the
// #dataTables_info element into the associated #{table}_info-container.
$('.wrapper-content').on('draw.dt',function(e) {
var id=$(e.target).attr('id');
$('#'+id+'_info').appendTo('#'+id+'_info-container');
});
</script>
Look for this HTML found in the referenced URL above:
<div class="ibox">
<div class="ibox-title">
<h5>Example with fullscreen option</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="fullscreen-link">
<i class="fa fa-expand"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
<p>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
</p>
</div>
</div>
And replace it with this:
<div class="row">
<div class="col-xs-12">
<div class="ibox position-relative border-bottom">
<div class="ibox-title">
<h5 class="text-muted">
<span><i class="fal fa-ticket-alt"></i> Orders <span class="badge">74</span></span>
</h5>
<div class="ibox-tools">
<a class="fullscreen-link">
<i class="fa fa-expand"></i>
</a>
</div>
</div>
<div class="ibox-content position-relative">
<div class="row">
<div id="demoTable_info-container" class="col-xs-12 mt-0 mb-4"></div>
</div>
<div class="resize_wrapper position-relative">
<table id="demoTable" class="table table-striped table-responsive">
<thead>
<tr>
<th>Order #</th>
<th>Cust. #</th>
<th>Cust. Name</th>
<th>City, State</th>
<th>Rep</th>
<th>Labels</th>
<th>Creation Date</th>
<th>Status</th>
<th>Status User</th>
<th>Status Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="resize_handle text-muted">Click and drag to resize</div>
</div>
</div>
</div>
</div>
**Also, load the datatables and page_resize scripts in the head section. **
This is the datatables script file we are using: https://datatables.net/download/#bs/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/fc-3.2.4/fh-3.1.3/sc-1.4.4
And this is the page_resize plugin file we are using:
https://datatables.net/blog/2017-12-31#Implementation
Answers
Thanks for posting this. I'll try to make some time to look into it, although it might be a week or two I'm afraid. If you are able to use JSFiddle or http://live.datatables.net to put together a test case that would be a great help.
Allan
I have setup a live datatables at this URL: http://live.datatables.net/fobizevo/1/edit
However, something internal to how the live site runs is throwing a JS error:
ReferenceError: Popper is not defined[Learn More] runner:10101:5
Not sure if it's realated to the above or not but the on click event handler is not fired when clicking on the "expand" link preventing a true replication of the problem.
However, I noticed that if you toggle OFF the output window and then toggle it back ON then that causes the runaway page resize event issue to occur.
Hopefully I have the page built enough for you to troubleshoot the problem.
Actually its the toggling of any of the other buttons except the output button that causes the issue since doing so causes the output window size to change and then fires the page resize event.