0

I have an issue with a responsive menu containing an input. The original thread is here: Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element

If I add an extra li, with an input (for a search field), I get a jump if I click the input. This happens only if I have scrolled before opening the sidebar. 

ul class="left">
      <li class="divider divider-first"></li>
      <li class="active"><a href="#_" class="toggle-nav">Main Item 1</a></li>
      <li class="divider"></li>
      <li><a href="#_" class="toggle-nav">Main Item 2</a></li>
      <li>
        <form method="get" action="/search.html">
          <input type="text" placeholder="Search" name="Search">
        </form>
      </li>
</ul>

Here's the fiddle with the extra li: http://jsfiddle.net/29qgW/5/ If you open the result window on an iPhone, you can see it happening.

Some kind of margin gets added above both the sidebar and the top bar. I tried to find it with the iOS simulator, but the margin is not really there as a style.

It gets even worse if you try to scroll after having selected the input. How can this be fixed? I've tried to change the metatag to disallow user zooming, but that doesn't work.

Does anyone know how to fix this?

Update: edited to show metatag, and closed input tag.

Community
  • 1
  • 1
Martinomagnifico
  • 23
  • 5
  • try weinre for debugging it on the actual device. Also, the metatag should work, check the syntax. – eyurdakul Dec 20 '13 at 12:09
  • The metatag is right, but doesn't prevent the scroll that gets initiated by the device. – Martinomagnifico Dec 20 '13 at 12:31
  • Are you missing a close `` tag within that last `
  • ` element? The markup turned red in the fiddle indicating there was a syntax error. not sure if that had anything to do with the situation...
    • – Phlume Dec 20 '13 at 12:32
  • Thanks. Fixed the markup. But the situation is still there. See the direct link to the result window here: http://fiddle.jshell.net/29qgW/5/show/ – Martinomagnifico Dec 20 '13 at 12:37