Code to reproduce below and attached.
Screen shots attached.
Screen shots attached.
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
meta
name
=
"description"
content
=
""
>
<
meta
name
=
"author"
content
=
""
>
<
link
rel
=
"icon"
href
=
"//getbootstrap.com/favicon.ico"
>
<
title
>Sticky Footer Navbar Template for Bootstrap</
title
>
<!-- Bootstrap core CSS -->
<
link
href
=
"//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel
=
"stylesheet"
>
<!-- Custom styles for this template -->
<
link
href
=
"//getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css"
rel
=
"stylesheet"
>
<!-- Kendo UI styles -->
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css"
>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<
script
src
=
"//getbootstrap.com/assets/js/ie-emulation-modes-warning.js"
></
script
>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<
script
src
=
"//getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"
></
script
>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<
script
src
=
"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"
></
script
>
<
script
src
=
"https://oss.maxcdn.com/respond/1.4.2/respond.min.js"
></
script
>
<![endif]-->
<
style
>
body {
overflow-x:hidden;
}
#toolbar {
position: absolute;
top: 50px;
width: 100%;
}
#wrapper {
position: absolute;
top: 100px;
position: absolute;
left: 0;
right: 0;
bottom: 60px;
overflow-y: scroll;
}
.area {
min-height: 400px;
}
.placeholder {
opacity: 0.4;
border-style: dashed;
}
.hint {
border-color: #333;
}
</
style
>
</
head
>
<
body
>
<!-- Fixed navbar -->
<
div
class
=
"navbar navbar-inverse navbar-fixed-top"
role
=
"navigation"
>
<
div
class
=
"container"
>
<
div
class
=
"navbar-header"
>
<
button
type
=
"button"
class
=
"navbar-toggle"
data-toggle
=
"collapse"
data-target
=
".navbar-collapse"
>
<
span
class
=
"sr-only"
>Toggle navigation</
span
>
<
span
class
=
"icon-bar"
></
span
>
<
span
class
=
"icon-bar"
></
span
>
<
span
class
=
"icon-bar"
></
span
>
</
button
>
<
a
class
=
"navbar-brand"
href
=
"#"
>Project name</
a
>
</
div
>
<
div
class
=
"collapse navbar-collapse"
>
<
ul
class
=
"nav navbar-nav"
>
<
li
class
=
"active"
><
a
href
=
"#"
>Home</
a
></
li
>
<
li
><
a
href
=
"#about"
>About</
a
></
li
>
<
li
><
a
href
=
"#contact"
>Contact</
a
></
li
>
<
li
class
=
"dropdown"
>
<
a
href
=
"#"
class
=
"dropdown-toggle"
data-toggle
=
"dropdown"
>Dropdown <
span
class
=
"caret"
></
span
></
a
>
<
ul
class
=
"dropdown-menu"
role
=
"menu"
>
<
li
><
a
href
=
"#"
>Action</
a
></
li
>
<
li
><
a
href
=
"#"
>Another action</
a
></
li
>
<
li
><
a
href
=
"#"
>Something else here</
a
></
li
>
<
li
class
=
"divider"
></
li
>
<
li
class
=
"dropdown-header"
>Nav header</
li
>
<
li
><
a
href
=
"#"
>Separated link</
a
></
li
>
<
li
><
a
href
=
"#"
>One more separated link</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<!--/.nav-collapse -->
</
div
>
</
div
>
<!-- Toolbar -->
<
div
id
=
"toolbar"
></
div
>
<!-- Begin page content -->
<
div
id
=
"wrapper"
>
<
div
class
=
"container"
>
<
div
class
=
"page-header"
>
<
h1
>Numeric Textbox</
h1
>
</
div
>
<
form
role
=
"form"
>
<
div
class
=
"row"
>
<
div
class
=
"col-sm-4"
>
<
div
class
=
"form-group"
>
<
label
for
=
"first-name"
class
=
"control-label"
>First Name</
label
>
<
input
id
=
"first-name"
type
=
"text"
class
=
"form-control"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"last-name"
class
=
"control-label"
>Last Name</
label
>
<
input
id
=
"last-name"
type
=
"text"
class
=
"form-control"
>
</
div
>
</
div
>
<
div
class
=
"col-sm-3 col-sm-offset-1"
>
<
div
class
=
"form-group"
>
<
label
for
=
"occupation"
class
=
"control-label"
>Occupation</
label
>
<
input
id
=
"occupation"
type
=
"text"
class
=
"form-control"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"age"
class
=
"control-label"
>Age</
label
>
<
input
id
=
"age"
type
=
"number"
class
=
"form-control"
data-role
=
"numerictextbox"
>
</
div
>
</
div
>
<
div
class
=
"col-sm-1 col-sm-offset-1"
>
<
div
class
=
"form-group"
>
<
label
class
=
"control-label"
>Gender</
label
>
<
div
class
=
"radio"
>
<
label
>
<
input
type
=
"radio"
name
=
"gender"
id
=
"male"
value
=
"1"
checked>
Male
</
label
>
</
div
>
<
div
class
=
"radio"
>
<
label
>
<
input
type
=
"radio"
name
=
"gender"
id
=
"female"
value
=
"2"
>
Female
</
label
>
</
div
>
<
div
class
=
"radio"
>
<
label
>
<
input
type
=
"radio"
name
=
"gender"
id
=
"other"
value
=
"3"
>
Other
</
label
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col-sm-1 col-sm-offset-1"
>
<
div
class
=
"form-group"
>
<
button
type
=
"button"
class
=
"btn btn-default"
>Go!</
button
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"row"
></
div
>
</
form
>
</
div
>
</
div
>
<
div
class
=
"footer"
>
<
div
class
=
"container"
>
<
p
class
=
"text-muted"
>Place sticky footer content here.</
p
>
</
div
>
</
div
>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<
script
src
=
"//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
></
script
>
<
script
src
=
"//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
></
script
>
<
script
src
=
"//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"
></
script
>
<
script
>
$(document).ready(function() {
kendo.init('body');
});
</
script
>
</
body
>
</
html
>