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

Right hand pane of splitter never right size or position

2 Answers 145 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 20 Feb 2013, 06:29 PM
I have 2 panes in my splitter.  No matter what I do, the right hand pane is always overlaying the position of the left hand pane, i.e. style=left:0px.  How can I fix it so that the right hand pane appears to the right of the left hand one?  Aslo, the size of the pane is not correct and does not reflect the sizes I set in the cshtml.

When I resize the broswer window, it displays as it should- it is just on the initial render that it doesn't work.  Code is below:

@{
    
    Html.Kendo().Splitter()
        .Name("report-splitter")      
        .Panes(panes =>
                   {
                       //Report List
                       panes.Add().Size("250px").Resizable(false).Scrollable(false)
                           .LoadContentFrom(Url.Action("ReportList", "Report", new { Group = reportingContextType }));
                       //Report Details
                       panes.Add().Size("650px").Resizable(false).Scrollable(false)
                            .Content(@<text>
                                          <div id="report-toolbar" class="report-toolbar"></div>
                                          <div id="report-parameters"></div>                                        
                                          <div id="report-body" >
                                              <div style="text-align: center">
                                                  <p>Select a report from the list</p>
                                                  <br/>
                                                  <img src="~/Images/report.png" />
                                              </div>
                                          </div>
                                      </text>);
                   })
        .HtmlAttributes(new { style = "min-height: 600px;" })//forcing the splitter to be bigger than default 300px
        .Render();
}
<script>
    $(document).ready(function (e) {
        $("#report-splitter").kendoSplitter({
            panes: [
                { resizable:false, collapsible: false, size: "250px" },
                { resizable: false, collapsible: false, size: "650px" }
            ]
        });
    });
</script>

2 Answers, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 21 Feb 2013, 11:08 AM
Ok - I have the problem because it is contained in a tabstrip element which is initially not displayed (it's the 3rd element in the tabstrip - when the page loads the 1st tab is selected).

When the user clicks on the 3rd tab, the splitter is initialised but the containing  div still has display=none and this is the reason why it isn't displaying correctly.

What is the best way of handling this?
0
Petur Subev
Telerik team
answered on 22 Feb 2013, 04:12 PM
Hello James,

I can suggest you to trigger the 'resize' event of the Splitter when the tab is activated.

e.g.

function onTabActivate(e){
     $(e.contentElement).find('.k-splitter').trigger('resize');
}


Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Splitter
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Petur Subev
Telerik team
Share this question
or