Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

IOS form in the tabbar, when you focus in input box the navbar and tabbar from top disappears

See original GitHub issue

Here is the code

It happens on IOS only.

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- Additional "tabbar" class -->
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <!-- Links have "tab-link" class instead of just "link" to switch tabs -->
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <!-- Tabs -->
  <div class="tabs">
    <!-- First tab, active -->
    <div class="page-content tab tab-active" id="tab-1">
      <div class="block">
      <form class="list" id="my-form">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" name="name" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">E-mail</div>
          <div class="item-input-wrap">
            <input type="email" name="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Gender</div>
          <div class="item-input-wrap">
            <select name="gender">
              <option value="male" selected>Male</option>
              <option value="female">Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Toggle</div>
          <div class="item-after">
            <label class="toggle toggle-init">
              <input type="checkbox" name="toggle" value="yes"><i class="toggle-icon"></i>
            </label>
          </div>
        </div>
      </div>
    </li>
  </ul>
</form>
      </div>
    </div>
    <!-- Second tab -->
    <div class="page-content tab" id="tab-2">
      <div class="block">
    <form class="list" id="my-form">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" name="name" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">E-mail</div>
          <div class="item-input-wrap">
            <input type="email" name="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Gender</div>
          <div class="item-input-wrap">
            <select name="gender">
              <option value="male" selected>Male</option>
              <option value="female">Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Toggle</div>
          <div class="item-after">
            <label class="toggle toggle-init">
              <input type="checkbox" name="toggle" value="yes"><i class="toggle-icon"></i>
            </label>
          </div>
        </div>
      </div>
    </li>
  </ul>
</form>
      </div>
    </div>
    <!-- Third tab -->
    <div class="page-content tab" id="tab-3">
      <div class="block">
<form class="list" id="my-form">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" name="name" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">E-mail</div>
          <div class="item-input-wrap">
            <input type="email" name="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Gender</div>
          <div class="item-input-wrap">
            <select name="gender">
              <option value="male" selected>Male</option>
              <option value="female">Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Toggle</div>
          <div class="item-after">
            <label class="toggle toggle-init">
              <input type="checkbox" name="toggle" value="yes"><i class="toggle-icon"></i>
            </label>
          </div>
        </div>
      </div>
    </li>
  </ul>
</form>
             </div>

    </div>
  </div>
</div>

Issue Analytics

State:
Created 6 years ago
Comments:11 (2 by maintainers)

Top GitHub Comments

1reaction

tmwebscommented, May 18, 2018

I solved it with corodova-plugin-keyboard:

if (app.device.ios) {  
  Keyboard.shrinkView(true, function (currentValue) { 
      console.log('----> shrinkView ' + currentValue); 
  });
 
  Keyboard.disableScrollingInShrinkView(false, function (currentValue) { 
      console.log('----> disableScrollingInShrinkView ' + currentValue); 
  });

   window.addEventListener('keyboardWillShow', function () {
              console.log('----> abrir teclado')
              $$(".toolbar").css('display', 'none');  
   });

   window.addEventListener('keyboardWillHide', function () {
              console.log('----> cerrar teclado');
              $$(".toolbar").css('display', 'block');
   });
}

0reactions

templatetunerscommented, May 18, 2018

Yaaay! overlay: true did the trick 👍 thank you