Splitter requires browser resize or F12 (Dev Tools) to display correctly in all browsers

5 posts, 1 answers
  1. Ian
    Ian avatar
    51 posts
    Member since:
    Apr 2009

    Posted 20 Jan 2013 Link to this post

    I'm trying to use the Splitter control in an MVC generated web page. For simplicity and to help debugging I've just copied the basic HTML example from the Kendo UI demo into a page I had started to build. The page has some other bits (Kendo Menu bar and various logo's and divs) but is otherwise the same as the demo HTML.

    Unfortunately the splitter just displays all the panels scrunched up and collapsed on itself with contents all overlaid (see Attachment 1).  If however I resize the browser or just click F12 (in IE) to display the developer toolbar the splitter then magically sorts itself out and displays what I'd expected the first time (see Attachment 2).

    Any ideas as to what could be causing this?  It happens in IE9 and Google Chrome and Firefox running under Windows 7 so doesn't appear to be a browser-specific issue. How can I get the splitter to display correctly on initial display instead of having to trigger some sort of refresh to get it to display correctly.  I am hooking up the splitter in $(document).ready as shown in the example, albeit after I've hooked up some Kendo menu controls and dropdown list controls.

    I could attach the source code but it's the same code shown in the demo "Basic Usage" tab under "HTML" shoe-horned into a very basic index.cshtml page on a starter MVC 4 web site.

    I'm using v2012.3.1315 of the Kendo UI libraries.

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 22 Jan 2013 Link to this post

    Hello Ian,

    Usually such issues are observed when the Splitter is initialized while it is inside a container that is hidden with a display:none style. In such cases Javascript size calculations don't work and the widget cannot adjust its layout. There are two possible workarounds:

    1. Hide the Splitter's parent with position:absolute;visibility:hidden instead of display:none.

    2. Trigger a manual layout readjustment for the Splitter once it becomes visible:

    var splitterObject = $("#SplitterID").data("kendoSplitter");
    splitterObject.trigger("resize");


    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ian
    Ian avatar
    51 posts
    Member since:
    Apr 2009

    Posted 22 Jan 2013 Link to this post

    Thanks Dimo.

    That was exactly it. The splitter was in a div that had a jQuery .hide applied.  Adding the resize trigger when the call to .show is made fixed the problem. Many thanks.
  5. Tom
    Tom avatar
    12 posts
    Member since:
    May 2013

    Posted 23 Jul 2013 Link to this post

    Dimo,

    I'm having the same issue, but for me, the tab's content is being loaded via LoadContentFrom (Action, Controller), so the call to trigger is throwing since the splitter is loading async and hasn't been downloaded yet.  Any suggestions here?
  6. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 25 Jul 2013 Link to this post

    Hi Tom,

    The TabStrip provides 

    contentLoad
    http://docs.kendoui.com/api/web/tabstrip#events-contentLoad

    and 

    activate
    http://docs.kendoui.com/api/web/tabstrip#events-activate

    events, which should cover all possible scenarios with regard to delayed widget initialization or manual layout adjustments. 

    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