or
This shows how navigatable doesn’t work when the user navigates using the right arrow key…
Run the fiddle – then select the first column of the second row. Hit your right arrow key two times… the grid doesn’t scroll to the right to show the City column as it should:
Check it out: http://jsfiddle.net/NqSuS/22/html, body
{
height
:
100%
;
margin
:
0
;
padding
:
0
;
font-size
:
13px
;
}
html
{
overflow
:
hidden
;
}
<
div
id
=
"splitter1"
style
=
"height: 100%; border: 0"
>
<
div
id
=
"top_pane"
></
div
>
<
div
id
=
"middle_pane"
>
<
div
id
=
"splitter2"
style
=
"height: 100%; width: 100%;"
>
<
div
id
=
"nav_pane"
style
=
"padding: 5px"
> //padding works well
<
div
id
=
"nav"
style
=
"border:1px solid red;"
> </
div
>
</
div
>
<
div
id
=
"content_pane"
style
=
"padding:5px"
> //padding right works not well !!! why?
<
div
id
=
"content"
style
=
"border:1px solid red;"
></
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"bottom_pane"
></
div
>
</
div
>
$(document).ready(
function
() {
var
splitter1 = $(
"#splitter1"
).kendoSplitter({
orientation:
"vertical"
,
panes: [{ size:
"30px"
, resizable:
false
}, {}, { size:
"20px"
, resizable:
false
}]
}).data(
"kendoSplitter"
);
var
splitter2 = $(
"#splitter2"
).kendoSplitter({
orientation:
"horizontal"
,
panes: [{ collapsible:
true
, size:
"200px"
}, {}]
}).data(
"kendoSplitter"
);
var
triggerResize =
function
() {
splitter1.trigger(
"resize"
);
splitter2.trigger(
"resize"
);
}
$(window).resize(triggerResize);
}
);
var splitter = $("#mainArea").data("kendoSplitter");
where #mainArea is the ID of the div where I attached the splitter. When I try this, I see an error in the firebug console indicating that "splitter is undefined".<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=600, initial-scale=1, maximum-scale=1"
>
<
meta
name
=
"apple-mobile-web-app-capable"
content
=
"yes"
/>
<
script
type
=
"text/javascript"
src
=
"Scripts/jquery-1.7.1.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/jquery.json-2.3.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/knockout-2.0.0.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/kendo/kendo.mobile.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/kendo/plugins/console.js"
></
script
>
<
link
href
=
"Styles/kendo/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
div
data-role
=
"view"
data-layout
=
"login"
data-title
=
"Login"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
div
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
data-icon
=
"globe"
href
=
"#overview-cities"
>Login</
a
>
<
a
data-icon
=
"contacts"
href
=
"#overview-contacts"
>Contacts</
a
>
</
div
>
</
div
>
<
div
id
=
"container"
>
<
span
>Main header</
span
>
<
div
>
<
label
for
=
"Username"
>Username</
label
>
<
input
id
=
"Username"
name
=
"Username"
type
=
"text"
/>
</
div
>
<
div
>
<
label
for
=
"Password"
>Password</
label
>
<
input
id
=
"Password"
name
=
"Password"
type
=
"password"
/>
</
div
>
<
div
class
=
"clear"
>
</
div
>
<
div
>
<
label
for
=
"SelectedLanguage"
>SelectedLanguage</
label
>
<
select
id
=
"SelectedLanguage"
name
=
"SelectedLanguage"
>
<
option
value
=
"da-DK"
>dansk (Danmark)</
option
>
<
option
value
=
"en-GB"
>English (United Kingdom)</
option
>
<
option
value
=
"fi-FI"
>suomi (Suomi)</
option
>
<
option
value
=
"de-DE"
>Deutsch (Deutschland)</
option
>
<
option
value
=
"nb-NO"
>norsk, bokmål (Norge)</
option
>
<
option
selected
=
"selected"
value
=
"ru-RU"
>русский (Россия)</
option
>
<
option
value
=
"sv-SE"
>svenska (Sverige)</
option
>
</
select
>
</
div
>
<
div
>
<
a
input
=
"button"
data-role
=
"button"
>Login</
a
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
window.kendoMobileApplication = new kendo.mobile.Application();
</
script
>
</
body
>
</
html
>