This is a migrated thread and some comments may be shown as answers.

kendo splitter height issue with Chrome

2 Answers 231 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Syleps
Top achievements
Rank 1
Veteran
Syleps asked on 19 Aug 2017, 06:57 AM

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 Answers, 1 is accepted

Sort by
0
Syleps
Top achievements
Rank 1
Veteran
answered on 22 Aug 2017, 12:16 PM

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

0
Dimitar
Telerik team
answered on 22 Aug 2017, 02:17 PM
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.
Tags
Splitter
Asked by
Syleps
Top achievements
Rank 1
Veteran
Answers by
Syleps
Top achievements
Rank 1
Veteran
Dimitar
Telerik team
Share this question
or