Splitter over an IFRAME is not sensed

[Jim]

This:

<div id="splitter">

   <div id="left">Left pane</div>

   <div id="right"><iframe></iframe></div>

</div>



allows moving the splitter over the left, but gets lost when hovering over the iframe area.

How can you capture the mouse or set the z-index or whatever to capture the resize over the iframe.



[btw, it works if you are above or below the iframe part - just not over]

thx

[Lee]

I am experiencing the same issue.

When using an iframe as a content pane, dragging the splitter bar over ONLY the iframe is jumpy (and often times not useable to resize halfway)....

Not sure this is a z-index issue as much as attempting to resize the iframe....either way it is leaving the splitter pretty much useless to me as I only wish to have two panes, one with a grid and the other with an iframe pointing to another page.  I need them to be re-sizable though...

Any new ideas?

[Jim]

We solved this by creating a z-index'ed higher invisible window on top of it (while dragging only) and passed the events on. I don't have that code handy at the moment but if you need further info (for some, that description may be enough, others not), let me know and I see what I can do/get. Thanks,

[Lee]

Here is a jsFiddle demonstrating the issue:

http://jsfiddle.net/DqmAC/1/

[Lee]

Jim,

Thank you for your response!  Although I am following you in theory, I am unsure of how to lay an invisible window on top of the iframe when dragging is occurring, and pipe the events through then...

Could you possibly post some code when you have the chance?

Thanks!

- Lee

[Lee]

Having some success with the invisible window trick....Just need to figure out what event to hook into to show the invisible window, then hide....'resized' seems to only fire after the bar has been let go.

What event (or state change) gets fired when a user starts to drag the splitter bar?


Thanks again for all of your help!

[Dimo]

Hi Lee,

You can use mousedown / touchstart on the splitbar.

However, this problem has been fixed long ago. I suggest you to upgrade your version of Kendo UI.

Regards,
Dimo
the Telerik team

[Lee]

Dimo,

Thank you for your prompt response.

I have updated the fiddle to the latest Kendo version and I'm still seeing the issue. Maybe I'm missing something. The dragging of the splitter bar over the iframe is extremely glitchy and regains smoothness directly above and below the iframe. Am I doing something wrong?

Would you mind taking a look at this fiddle and confirming that you see the behavior?

http://jsfiddle.net/DqmAC/3/



Thanks,
Lee

[Dimo]

Hello Lee,

2012.2 710 is not the latest Kendo UI version anymore. There have been three official releases afterwards.

http://www.kendoui.com/web/whats-new.aspx

Greetings,
Dimo
the Telerik team

[Lee]

Dimo,

Thanks for pointing that out. The fiddle has now been updated to the latest version (2013.3.1315) and is still exhibiting the same, undesired behavior.

Did you try out the fiddle? Did it work for you when the references were updated to the latest version?


Thanks,
Lee

[Dimo]

Hello Lee,

You have updated the Kendo UI version, but not the jQuery version, which is now incompatible.

http://docs.kendoui.com/getting-started/javascript-dependencies#jquery-version

When you make this final change, everything should work well.

Greetings,
Dimo
the Telerik team

[Lee]

Dimo,

My fault, I really should have been more thorough. This resolved my issue. I appreciate all of your help.


Thanks,
Lee

[Rita]

I have now the newest kendo ui version and the correct jquery version. But the iframe stuff does not work. I can do what i want, but i cant figure out how to get it working. Can you please post an example how to use the window with the different z-index?

[Dimo]

Hello Rita,

You don't need any workarounds in order to achieve proper Splitter behavior when using an IFRAME inside a Splitter pane.

If you update the Kendo UI and jQuery versions in the jsFiddle demo above, the scenario will work.

Regards,
Dimo
Telerik