kendo ui splitter resize method brokens the kendo ui scheduler layout - jquery

Question

I've a kendo ui splitter(jquery) with a scheduler in the upper panel and a grid in lower panel (code below)

When i inizialize the splitter it isn't correctly positioned (look at picture one)

Then, i tried to fix the layout ot resize the splitter itself whith the corresponding resize() method, and actually the whole layout now is how i need! (the splitter is correcly placed between the scheduler and the grid and works well when i move it).

Anyway, after calling the splitter resize() method, the scheduler's layout seems to be broken, there is some unwanted space inside it(look at the picture 2)

Is there a way, maybe "enclosing" the scheduler in a parent component with some specific css class, to enclose the scheduler itself and isolate it from the size variation that the resizing has applied?

<div id="splitter" class="content" style="height: calc(100vh - calc(7rem + 1px) - calc(7rem + 1px));">
    <div class="card">  //upper card that contains scheduler and other stuffs
        <div class="card-header">
            <div class="card-tools" style="float:left">
                <div class="row">
                
                        <div class="col-xs-3 pr-3" style="min-width:300px">
                            <select id="cbbPuntoVendita">
                            </select>
                        </div>
                        <div class="col-xs-3" style="min-width:300px">
                            <select id="cbbReparto">
                            </select>
                        </div>
                
                    </div>
            </div>
             <div class="card-tools">
                    <button type="button" id="btnSave" style="width:200px;"><i class="fas fa-save"></i> Save</button>
                    <button type="button" id="btnRefresh"><i class="fas fa-refresh"></i> Refresh</button>
                    <button type="button" id="btnCancel"><i class="fas fa-trash"></i> Cancel</button>
             </div>
         </div>
         <div id="scheduler" class="card-body"></div>
    </div>

    <div class="card">     //lower card that contains the grid
        <div id="riepilogoIndicatori" class="card-body"></div>
    </div>

</div>

var splitter = $("#splitter").kendoSplitter({
                orientation: "vertical",
                panes: [
                    { collapsible: false, min: "300px" },
                    { collapsible: true , size: "25%" }
                    ]
                }).data("kendoSplitter");
                
                
                setTimeout(function() {
                    console.log("***resize***");
                    splitter.resize(true); 
                }, 2000);