[Solved] kendo splitter height issue with Chrome

[Syleps]

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

[Syleps]

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

[Dimitar]

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