In the sample below (also attached), the toolbar has an extra 2px in Google, FF and Safari (not in IE - latest versions on win 8.1) which triggers the display of an horizontal scrollbar at teh bottom of the window. Bug? Workaround?
<!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> #toolbar { position: absolute; top: 50px; width: 100%; } </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 class="container"> <div class="page-header"> <h1>Sticky footer with fixed navbar</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p></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() { $('#toolbar').kendoToolBar({ items: [ { type: 'splitButton', text: 'splitButton', menuButtons: [ { id: 'foo', text: 'Foo' }, { id: 'bar', text: 'Bar' } ], overflow: 'never' }, { type: 'button', text: 'Button', overflow: 'auto' }, { type: 'buttonGroup', buttons: [ { text: 'Option 1', togglable: true }, { text: 'Option 2', togglable: true }, { text: 'Option 3', togglable: true } ], overflow: 'always' } ] }); });</script></body></html>1 Answer, 1 is accepted
0
Hi Jack,
The issue occurs because the ToolBar has borders by default. One possible workaround is to remove the left and right border width with CSS. Alternatively you can set box-sizing: border-box to the ToolBar element.
I hope this information will help.
Regards,
Alexander Valchev
Telerik
The issue occurs because the ToolBar has borders by default. One possible workaround is to remove the left and right border width with CSS. Alternatively you can set box-sizing: border-box to the ToolBar element.
I hope this information will help.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!