I am using the bootstrap affix component to give a fixed nav bar at the top of the page. This nav bar contains form elements. When a form element is clicked on (given focus) the body of the page scrolls to the top. Is there a way to override this behaviour to prevent the scrolling?
Asked
Active
Viewed 1,239 times
1
-
you can try to use `stringByEvaluatingJavaScriptFromString:` with [the code from this question](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) – Daniel Jun 10 '15 at 07:15
3 Answers
0
To save someone else 4 hours+ trawling for answers I'll attempt to answer my own question.
There doesn't seem to be a solution for using form elements on a fixed div without jumping.
My solution was to change the markup to a bootstrap-style drop-down.
Original select form element markup:
<select id="gender" name="gender" class="fake-select">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
Bootstrap style drop-down markup:
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">Dropdown <span class="caret"></span>/a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Male</a></li>
<li><a href="#">Female</a></li>
</ul>
</li>
Created a plunker to demonstrate this: http://plnkr.co/hYTJ9l
https://github.com/takien/FakeSelect library that offers a quick solution by manipulating the rendered markup.
nickf
- 53
- 1
- 7
0
I have my form in a modal popup. The .modal-open class is added to the body when the modal shows. I added the following style to the body to prevent it from scrolling while the popup is active.
.modal-open {
position: fixed;
}
qdev76
- 149
- 1
- 9
