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
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
4 Answers, 1 is accepted
0
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
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!
0
Anamika
Top achievements
Rank 1
Rank 1
answered on 20 Oct 2014, 12:32 PM
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
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
0
Anamika
Top achievements
Rank 1
Rank 1
answered on 21 Oct 2014, 02:00 PM
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.
$(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.
0
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
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!