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.
Hi Peter,
Can you show me how you are using the Splitter with the Layout Manager? I have attached a draft of a sample with a splitter. I will ask that you modify the sample and send back to me.
What will also be helpful is if you can tell me with as much granulity the user actions or steps-to-reproduce this issue. If you have screen images you can attached that will help to communicate the behavior and how you reproduce the behavior, that will be welcome.
Once I have sample I am able to reproduce this issue I can further look into what may be causing it. Thanks Peter!
Troy, I have narrowed the problem to anytime the splitter is being dragged over an iframe. Is there any option that is built to handle this? I found a similar problem with another plugin that has an option to handle it. you can see it here:https://groups.google.com/forum/#!topic/jquery-ui-layout/FM4nUeSaktoIf this does not illustrate the problem I can modify the file you sent. Please advise. Thank you for your help in this matter.
Thank you for this information. Actually, if you can send me the modified sample that will be the best next step for looking into this. With a running sample and the steps-to-reproduce I will then have a better picture of what's going on. 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.
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.
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!