Right hand pane of splitter never right size or position

3 posts, 0 answers
  1. James
    James avatar
    8 posts
    Member since:
    Jan 2013

    Posted 20 Feb 2013 Link to this post

    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:

            .Panes(panes =>
                           //Report List
                               .LoadContentFrom(Url.Action("ReportList", "Report", new { Group = reportingContextType }));
                           //Report Details
                                              <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>
                                                      <img src="~/Images/report.png" />
            .HtmlAttributes(new { style = "min-height: 600px;" })//forcing the splitter to be bigger than default 300px
        $(document).ready(function (e) {
                panes: [
                    { resizable:false, collapsible: false, size: "250px" },
                    { resizable: false, collapsible: false, size: "650px" }
  2. James
    James avatar
    8 posts
    Member since:
    Jan 2013

    Posted 21 Feb 2013 Link to this post

    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?
  3. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 22 Feb 2013 Link to this post

    Hello James,

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


    function onTabActivate(e){

    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!
Back to Top