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>3 Answers, 1 is accepted
the form-control class duplicates the styling which Kendo UI already applies. Removing the class in question resolves the issue - you may wrap it in a block element for consistency. Please check this example - I also added the Kendo UI bootstrap CSS.
Regards,
Petyo
Telerik
Rank 2
Iron
I've had a project with native controls and with BOOTSTRAP 3.x modified (to have denser line's less padding). With the CSS below is something i've created to support the use of the .form-control class even with Kendo.
But since the solution below wa necessary only because from where my project started, if i'd start it over, i would go this way: http://demos.telerik.com/kendo-ui/bootstrap/
input.k-textbox, textarea.k-textbox {
padding: initial;
}
.k-combobox .k-dropdown-wrap:before, .k-picker-wrap:before, .k-numeric-wrap:before {
content: "";
display: inline;
width: 0;
height: inherit;
padding-bottom: inherit;
}
.k-picker-wrap .k-select, .k-numeric-wrap .k-select, .k-dropdown-wrap .k-select {
min-height: 100%;
line-height: inherit;
vertical-align: middle;
-moz-box-sizing: border-box;
text-align: center;
width: 1.9em;
height: 50%;
}
.k-numerictextbox .k-select .k-link span.k-i-arrow-n {
vertical-align: baseline;
}
.k-numerictextbox .k-select .k-link span.k-i-arrow-s {
vertical-align: baseline;
}
.form-group .k-widget,
.form-group .k-textbox {
width: 100%;
height: auto;
}
.form-control.k-widget {
padding: 0;
width: 100%;
height: auto;
}
.form-control.k-widget:not(.k-autocomplete) {
border-width: 0;
}
Rank 2
@balazs Thanks! The magic words for me were:
.k-combobox .k-dropdown-wrap:before, .k-picker-wrap:before, .k-numeric-wrap:before {
content: "";
display: inline;
}