When I open the keyboard to compile the form the navabar disappear Android

Hi, I’ve a strange problem… When I start to compile the form the navbar slowly begins a fading until it disappears altogether. On Android when I open the keyboard to compile the form, the keyboard opened push the navbar upward until it disappears.The same behavoiur if I use the tab on the keyboard. I don’t understand the reason… I have a lot of page in my app, and this problem appears only in the page where there are form. I thought that could be a div didn’t close. I checked the code but it seems correct… but I don’t know another possible cause. Please help me…

thank you in advance

this is my html page

<div data-name="users-add" class="page">

<div class="page-content pg-no-padding">

	<div class="row justify-content-center">
		<div class="col-100 tablet-auto desktop-80">
			<div class="block">
				<form class="list" id="form-add-user">

					<div class="row justify-content-center">
							<div class="col-100 tablet-auto desktop-80">
								<div class="row justify-content-center">
									<h2> Add User</h2>
								</div> 

								<div class="card">
									<div class="card-content card-content-padding">	
									<div class="row justify-content-center margin padding">Compile...</div>
									<div class="row">
										<div class="col-100 tablet-auto desktop-auto">
											<div class="list no-hairlines-md">
												<ul>
													<li class="item-content item-input">
														<div class="item-inner">
															<div class="item-input-wrap">
																<div class="item-title item-label">Nome</div>
																<input type="text" placeholder="" name="first_name">
																<span class="input-clear-button"></span>
															</div>
														</div>
													</li>
													<li class="item-content item-input">
														<div class="item-inner">
															<div class="item-title item-label">Surname</div>
															<div class="item-input-wrap">
																<input type="text" placeholder="" name="last_name">
																<span class="input-clear-button"></span>
															</div>
														</div>
													</li>
													<li class="item-content item-input">
														<div class="item-inner">
															<div class="item-title item-label">Email</div>									
															<div class="item-input-wrap">
																<input type="email" placeholder="" name="email">
																<span class="input-clear-button"></span>
															</div>
														</div>
													</li>
													<li class="item-content item-input">
														<div class="item-inner">
															<div class="item-title item-label">Password</div>	
															<div class="item-input-wrap">
																<input type="password" placeholder="" name="password">
																<span class="input-clear-button"></span>
															</div>
														</div>
													</li>
													<li class="item-content item-input">
														<div class="item-inner">
															<div class="item-title item-label">Confirm password</div>
															<div class="item-input-wrap">
																<input type="password" placeholder="" name="password_confirm">
																<span class="input-clear-button"></span>
															</div>
														</div>
													</li>

													<li class="item-content item-input">
														<div class="item-inner">
															<div class="item-title item-label">Phone</div>
															<div class="item-input-wrap">
																<input type="tel" placeholder="" name="phone">
																<span class="input-clear-button"></span>
															</div>
														</div>
													</li>

													<li class="item-content item-input">
														<div class="item-inner">
															<div class="item-title item-label">Name Company</div>
															<div class="item-input-wrap">
																<input type="text" placeholder="" name="company">
																<span class="input-clear-button"></span>
															</div>
														</div>
													</li>
												</ul>
											</div><!--list-->
										</div><!--col-->
									</div><!--row-->
									<div class="row justify-content-center margin padding">Role</div>	
									<div class="row">
										<div class="col-100 tablet-auto desktop-auto">
											<div class="list no-hairlines-md">
												<ul>
													<li>
														<label class="item-radio item-content">
															<input type="radio" name="id_user" value="1" checked />
															<i class="icon icon-radio"></i>
															<div class="item-inner">
																<div class="item-title"> Superadmin </div>
															</div>
														</label>
													</li>

													<li>
														<label class="item-radio item-content">
															<input type="radio" name="id_user" value="2" />
															<i class="icon icon-radio"></i>
															<div class="item-inner">
																<div class="item-title"> Profile A </div>
															</div>
														</label>
													</li>

													<li>
														<label class="item-radio item-content">
															<input type="radio" name="id_user" value="3" />
															<i class="icon icon-radio"></i>
															<div class="item-inner">
																<div class="item-title"> Profile B </div>
															</div>
														</label>
													</li>
												</ul>
											</div><!--list-->
										</div><!--col-->
									</div><!--row-->

									<div class="block margin padding">
										<div class="row">
											<div class="col">
												<a class="button button-fill" onclick="addUser()">Save</a>
											</div>
										</div> <!-- ./ block - save button -->
									</div> <!-- ./ block -->
									</div><!--card-content-->
								</div><!--.card-->								
							</div><!--.col-->
					</div><!--.row-->					
				</form>
			</div> <!-- ./ block -->
		</div><!--.col-->
	</div><!-- .row-->

</div> <!-- ./ page-content -->