Splitter over an IFRAME is not sensed

14 posts, 0 answers
  1. Jim
    Jim avatar
    3 posts
    Member since:
    Aug 2010

    Posted 07 Sep 2012 Link to this post

    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
  2. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 29 Jan 2013 Link to this post

    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?
  3. Kendo UI is VS 2017 Ready
  4. Jim
    Jim avatar
    1 posts
    Member since:
    Sep 2012

    Posted 29 Jan 2013 Link to this post

    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,
  5. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 29 Jan 2013 Link to this post

    Here is a jsFiddle demonstrating the issue:

    http://jsfiddle.net/DqmAC/1/
  6. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 29 Jan 2013 Link to this post

    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
  7. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 29 Jan 2013 Link to this post

    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!
  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 30 Jan 2013 Link to this post

    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
  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 30 Jan 2013 Link to this post

    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
  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 30 Jan 2013 Link to this post

    Dimo,

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


    Thanks,
    Lee
  14. Rita
    Rita avatar
    1 posts
    Member since:
    May 2011

    Posted 23 Sep 2013 Link to this post

    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?
  15. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 23 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready