kendo splitter height issue with Chrome

3 posts, 0 answers
  1. Syleps
    Syleps avatar
    8 posts
    Member since:
    Nov 2013

    Posted 19 Aug Link to this post

    Hi,

    My case is the following :

    - At the top of my page I have a header

    - On the rest, I have a splitter with orientation Horizontal, inside a div with width: 100%, weight: 100% )

    When I move the splitter, header disappears;  but only with Chrome (It works correctly with FF & IE11 ...)

    After investigations, the height calculated by the splitter is incorrect

    I found a correlation with the fact that the offsetTop returned by Chrome is also incorrect

    In fact, my page is not so simple as described previously : there is a lot a  nested div. And at one point, the offsetTop returns to 0

    Here is the code that I have to add so that it works (sorry for the quality of the code, i'm a beginner javascript developer) :

     

    var contInit = document.getElementById("Container-" + splitterId);
     var cont = contInit;
     var top = cont.offsetTop;
     var zero = false;
     while (cont.parentElement !== document.body) {
         cont = cont.parentElement;
         if (cont.offsetTop === 0) zero = true;
         else if (cont.offsetTop !== 0 && zero) {
                zero = false;
                top = top + cont.offsetTop;
         }
    }
    contInit.style.height = "calc( 100vh - " + top + "px )";
     var outerSplitter = $("#" + splitterId).data("kendoSplitter");
     if (outerSplitter != null)        outerSplitter.resize(true);

     

    If you have a better solution, I'll take it 

     

    Regards

  2. Syleps
    Syleps avatar
    8 posts
    Member since:
    Nov 2013

    Posted 22 Aug in reply to Syleps Link to this post

    Hi,

    After a few other tests, it happens that the problem is the same for all browsers. Simply, the behavior of the "sliding" of the splitter is not the same with Chrome (it displays all the splitter => header shift)

    The problem is that some "headers" do not yet have their height when calculating the splitter, even on the document.ready (). The massive use of Ajax in the pages probably explains this.
    My solution called the size calculation on the first pane load (event ContentLoad)

    And I rewrote the code (When I said I was a beginner in Javascript) :

    var contInit = document.getElementById("Container-" + splitterId);
     var cont = contInit;
     var top = cont.offsetTop;
    while (cont.offsetParent!=null && cont.offsetParent !== document.body) {
            cont = cont.offsetParent;
          top += cont.offsetTop;
        }
      contInit.style.height = "calc( 100vh - " + top + "px )";
      var outerSplitter = $("#" + splitterId).data("kendoSplitter");
        if (outerSplitter != null)
          outerSplitter.resize(true);

     

    As you can see, I use a container div to fix the size. I don't know if there's anything better to do ...

    Regards

  3. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 22 Aug Link to this post

    Hello,

    I have tried to replicate the described behavior with the following Dojo example, where the Splitter is configured to be at 100% height and there is also a header above it with fixed size. Can you verify that this is the expected result?

    In case the above does not help you to resolve the issue, please modify the example so that it reproduces the issue and send it back for a review.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top