When using the splitter, I find that often times when i attempt to adjust the panes with the splitter bar, the cursor moves past the splitter bar and i then have to go back and click on the splitter to disengage it. This happens in multiple browsers and on multiple machines. This problem is essentially rendering this functionality unusable. Any guidance would be helpful.
Hello Peter,
Did the info that Troy provide help resolve the issue you were facing with the splitter? Please let me know if I may be of any further help with this issue.
Hi Peter,
This issue is occurring because the dragging doesn’t work over an iFrame. To get around this in IE11 (doesn’t work earlier IE browser versions) you can set dragDelta to 0 and the css property pointer events to none when the resize is started (and after that css property pointer events should be set to auto). For example:
$("#splitter").igSplitter({
//height: "100%",
height: "700px",
orientation: "vertical",
dragDelta: 0,
resizeStarted: function(evt, ui) {
$('iframe').css('pointer-events','none');
},
resizeEnded: function(evt, ui) {
$('iframe').css('pointer-events','auto');
panels: [
{
collapsible: false,
resizable: true
size: 500,
collapsed: false,
collapsible: true,
}
]
});
For other browsers, a DIV overlay which covers the iFrame should be added in order for the events to be fired.
More info you can find here - http://stackoverflow.com/questions/13473396/jquery-ui-resizable-resize-a-div-placed-over-an-iframe
Peter, support for dragging over an iFrame will be added in the future but for now this recommended work-around should help.
Thanks Peter. Let me know if you need any further details regarding this.
I have submitted this as a development issue with the id #173602 to be looked at my our engineers on the contol.
To update you on this, I am still investigating options to resolve this behavior. I will follow-up with you once again once I have some further details on this. Thanks!
Attached is the .zip file containing the html file in question. When the splitter/resizer is dragged over the iframe you can see the problem. In addition, unless the splitter is set at an exact pixel height, the div in the right pane does not set the height correctly. I am trying to have the content of both panes be 100% of the browser window.