Splitter Height on load

6 posts, 0 answers
  1. Daniel
    Daniel avatar
    3 posts
    Member since:
    Dec 2012

    Posted 29 Dec 2012 Link to this post

    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 :)
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    3 posts
    Member since:
    Dec 2012

    Posted 08 Jan 2013 Link to this post

    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 ?
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 Jan 2013 Link to this post

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

    Posted 16 Jan 2013 Link to this post

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

    Posted 17 Jan 2013 Link to this post

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