Splitter Height on load

[Daniel]

Hi everyone,

I'm doing an ASP.NET MVC project with Kendo UI, and I've got a little problem.

I have a jquery script for re sizing my splitter.

window.onload = function () {

      $("#vertical").css("height", $(window).height());

};

But when I load my layout, I've got the good size, but not the good display. (1.png)

If I hide my bottom splitter , and then show it, it's the well display (2.png)

Thanks all for you answers :)

[Dimo]

Hi Daniel,

The Splitter is fully capable of resizing itself automatically to the viewport height by using CSS styles only. However, you need to take into consideration some web standards and requirements with regard to height styles. The following example demonstrates this:

http://jsfiddle.net/dimodi/QZcH7/

In short, an element with percentage height must have a parent with explicit height. Elements with 100% height must not have siblings, paddings, margins and borders.

On the other hand, if you need to resize the Splitter manually in some cases, you have to trigger a resize event afterwards:

$("#vertical").data("kendoSplitter").trigger("resize");

Of course, the above will not work in window.onload, as the Splitter does not exist yet.

Regards,
Dimo
the Telerik team

[Daniel]

Hi !

Thanks a lot for your answer ! I'll try when I come home. 

So if it won't work in window.load , will it work in document.ready ?

[Dimo]

Hi Daniel,

Generally, document.ready is the earliest recommended time to interact with Kendo UI widgets, given that they already exist on the page. This means that:

+ when using MVC wrappers, your custom script must be placed after the Splitter declaration

+ when using pure client-side-only Kendo UI widgets, the document.ready handler of the customization script must be placed after the document.ready handler of the widget initialization script.

As I already mentioned, in your particular case the height of the #vertical element can be applied with CSS only, so no script will be required.

Regards,
Dimo
the Telerik team

[Daniel]

Hi,

I add "height : 100%" in my vertical in CSS. But there is still a problem with the display :

When I load my page, the bottom takes all place, and I have to minimize it to see my page.

[Dimo]

Hello Daniel,

100% high elements cannot have borders, margins, paddings and sibling elements. Please make sure you are fulfilling all these requirements. You can compare your implementation with my example once again:

http://jsfiddle.net/dimodi/QZcH7/

The outer Splitter had a border, which I have missed to remove, but this is done now.

Regards,
Dimo
the Telerik team