Nested Splitter on tablet do not show all panes till manual resize

5 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 15 Oct 2014 Link to this post

    Hello,

    I have nsted splitter which Displays fine on Desktop Browsers. but when displayed on tablet browser ipad/android do not Show all panes. even if collapcible is false , once i resize window the panes are visible properly. I tried forcing resize in document ready but then page hangs and never loads. Attached my view code.

    i Need 2 horizontal panes inside splitter and each horizontal pane should have 2 vertical panes inside.
    thanks

    Anamika
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 17 Oct 2014 Link to this post

    Hello Anamika,

    I created a simple test page, based on your code, which worked as expected on iPad 4 and Nexus 7. If the problem still exists on your side, please send a standalone demo, which I can run as is.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 20 Oct 2014 Link to this post

    Hello dimo,

    Even i do not see the behaviour if i create a new project. But with my existing project if i have just basic splitter code in view for tablet it will always come with splitter collapsed. My _Layout.Tablet file has these includes
    <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>
             <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
             <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />        
            <link href="@Url.Content("~/Content/jquery.mobile-1.1.0.css")" rel="stylesheet" type="text/css" />  
            <link href="@Url.Content("~/Content/jquery.mobile.structure-1.1.0.css")" rel="stylesheet" type="text/css" />
             <link href="@Url.Content("~/Content/jquery.mobile.theme-1.1.0.css")" rel="stylesheet" type="text/css" />      
            <script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>

             <link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2014.2.1008/styles/kendo.common.min.css"  type="text/css"/>
            <link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2014.2.1008/styles/kendo.rtl.min.css"  type="text/css"/>
            <link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2014.2.1008/styles/kendo.default.min.css"  type="text/css"/>
            <link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2014.2.1008/styles/kendo.mobile.all.min.css"  type="text/css"/>

             <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
          
            <script src="@Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>
      <script src="//da7xgjtj801h2.cloudfront.net/2014.2.1008/js/jquery.min.js"></script>    
            
        <script src="//da7xgjtj801h2.cloudfront.net/2014.2.1008/js/kendo.all.min.js"></script>
            <script src="//da7xgjtj801h2.cloudfront.net/2014.2.1008/js/kendo.aspnetmvc.min.js"></script>
             <script src="//da7xgjtj801h2.cloudfront.net/2014.2.1008/cultures/kendo.culture.de-DE.min.js"></script>

    If you can think of anything which may result in this behaviour. If i use this css then a see just one of the panes little bit and not the whole splitter collapsed. Once i resize it shows fine.
     #splitter {
            height:650px;
             width:650px;
             overflow: visible;
              z-index: 2;

        }

    Thanks

    Anamika
  5. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 21 Oct 2014 Link to this post

    finally got it working on tablet with panes resize in document load
      $(document).ready(function () {       
            setTimeout(function () {
                
                $("#splitter").data("kendoSplitter").size("#top_pane",  "200px").trigger("resize");
               
            }, 300);
           
        });
    Not sure why splitter resize could not show but just resizing one pane did the trick.
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 22 Oct 2014 Link to this post

    Hello Anamika,

    The provided information so far does not suggest the exact cause of the problem. Please provide a standalone runnable example.

    Alternatively, try executing the resize(true) method of the problematic Splitter inside a setTimeout() after the page is loaded.

    http://docs.telerik.com/kendo-ui/using-kendo-in-responsive-web-pages#individual-widget-resizing

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready