IOS form in the tabbar, when you focus in input box the navbar and tabbar from top disappears
See original GitHub issueHere 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 Results From Across the Web
How do I get a tab bar in iOS15 th… | Apple Developer Forums
The tab bar is meant to have a background until nothing is scrolled behind it. If the tab bar doesn't respond to you...
Read more >Tab Bar Controller disappearing when moving back to another ...
When I try this the tab bar disappears on V1 when I segue back to V1 from V2. TAB BAR CONTROLLER -> TAB...
Read more >Untitled
How can I change the text color of the Navigation Bar on iOS? ... customization tabbar Generally speaking, the method is relatively simple...
Read more >react-native-tab-view - npm
React Native Tab View. A cross-platform Tab View component for React Native. Implemented using react-native-pager-view on Android & iOS, ...
Read more >How to Turn Off Tab Bar Coloring / Tinting in Safari - MacRumors
In iOS 15 as well as Safari 15 for macOS Big Sur and macOS Catalina, Apple introduced some Safari interface design changes that...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I solved it with corodova-plugin-keyboard:
Yaaay!
overlay: true
did the trick 👍 thank you