Spent a few days searching on how i could "edit" the Javascript focus method to work.
What i did was to use a bootstrap fixed navigation bar, in which i had to use padding-top: 70px on the body in CSS so that my body content is not hidden behind the navigation bar.
However if i try to do an focus on a text input due to validation purposes, the focus method focuses on the text input but it is hidden behind the navigation bar.
Navigation Bar code
<!-- Navigation -->
<div class="row">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">C-Tru</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Testing</a>
</li>
<li>
<a href="#">Submissions</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
I was using the following CSS settings
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
In the Body i did the following (modified to make it simple)
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-md-4">
<div class="form-group">
<label for="semester" class="control-label col-xs-3">Date</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="semester" placeholder="eg. yyyymmdd">
</div>
</div>
<div class="form-group">
<label for="testingcode" class="control-label col-xs-3">Test Code</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="testingcode" placeholder="eg. UAT1">
</div>
</div>
<div class="form-group">
<label for="subject" class="control-label col-xs-3">Subject</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="subject" placeholder="eg. Chinese">
</div>
</div>
</div>
</div>
</div>
What happened was that i did a javascript to on focus testing code, however testing code was focused, but i had to scroll up to so that it is no longer hidden behind the navigation bar. (I had alot of other controls in the exact one that i am trying to build so i needed to scroll down)
I looked up the issue and found several other options that people suggested
From Bootstrap css hides portion of container below navbar navbar-fixed-top
Last post, seemed like it had an answer to resizing, but it does not seem to help with the focus portion.
Hope this is not too hard to understand, would try to capture a video and share it so that it could help with my explanation
