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

[Ian]

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.

[Dimo]

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

[Ian]

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.

[Tom]

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?

[Dimo]

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