Splitter bar appears on left at first. No right pane.

[Miika]

Hi,

I have a simple splitter set up with two panes. Some navigation stuff in the left pane, and content on the right. The html is as follows:

<div id="koulutuspuuSplitter" style="height:500px;" >
    <div id="koulutuspuu"></div>
    <div id="koulutusPuuKomponentti"></div>
</div>

In document.ready I call

        $("#koulutuspuuSplitter").kendoSplitter({
            panes: [
                { collapsible: true, size: "350px" },
                { collapsible: true },
            ]
        });

After which the contents of the left pane are loaded by ajax. The contents of the right pane are not loaded until an item is clicked in the left pane. So it is empty for now.

The problem: When the page loads, the splitter bar appears on the left edge (to the left of the "left pane"). The left pane is loaded just fine, with its own scrollbar and everything. But in place of the right pane is just empty space, and clicking on an item to load contents doesn't fill it (so the pane is not where its supposed to be). Doing any kind of resize event (resize browser window, open firebug panel, etc.) causes the splitter bar to "jump" from the left, to its proper position in between the panes. After this jump, the right pane contents also show up properly.

Presumably there is just something I am doing wrong. Perhaps wrong order of operations? Perhaps the problem is that the panes have no content when splitter is loaded? Something else?

[Miika]

Ok, I'm not going mad. I have managed to reproduce it outside of my website. Here is the jsFiddle.

Seems the problem relates to the show/hide functions in jQuery. Namely, that if the splitter is added when the divs are not visible, then the splitter bar is messed up even after the divs are shown. It then auto-fixes itself upon screen resize (I assume it calls some kind of redraw at that point?).

Is there a way to call the redraw myself? Will this be fixed in future releases?

[Nohinn]

Do you have any reason for creating the splitter instance when the dom element is hidden?
If you move the lines of the splitter instance just before the hide function, does it work as you expected?

[Miika]

The splitter is created in a partial view loaded via ajax. The div that contains the splitter is kept hidden until all content is loaded, at which time it is shown. If I remove the show/hide functions, then it all works just fine.

[Nohinn]

Ok, you can use this keeping the hide and show functions:

// show the div.

        $("#koulutuspuuSplitter2").show(600, function() {

            $("#koulutuspuuSplitter2").data("kendoSplitter")._resize();

        });

But you will get a little flicker as it will show for a second collapsed and then it will expand.
There is no other option (using hide and show), as it looks the _resize function of the splitter needs to wait for the splitter itself to be visible to make it work.

[Dimo]

Hello,

I will only add a couple of remarks:

1. Indeed, the Splitter cannot adjust its layout properly if it is created in a container with a display:none style. Javascript size calculations don't work in this case. Instead of display:none, one can use visibility:hidden to hide containers. In this case layout adjustment works. The difference is that the hidden container will take up space on the page. If this is unacceptable, temporarily use position:absolute.

2. It is better to use

splitter.trigger("resize");

instead of

splitter._resize();

The latter method is not part of the public API and we could change its name or behavior at our discretion.

Regards,
Dimo
the Telerik team