All geek questions in one place

JQuery Mobile Phonegap iOS: title flickers when I pull up the keyboard

The title pretty much sums it up. I have a fixed persistent header through:

<div data-role="header" data-id="headerbar" data-position="fixed" data-theme="b"> <h1>Title!</h1> <a href="#" class="ui-btn-right">Login</a> </div>

And then another header through:

 <div data-role="header" data-theme="c"> <h6>1. Type a name </h6> <input type="search" name="name" id="basic" value=""></input> </div>

When I click on the text input in the xcode simulator (and on my actual iphone), the first heading becomes solid white and then returns to the corresponding heading.

Ideas?

My screen looks like this: Sim screen

+4
source share
3 answers

You can use <label> instead of <header>

 <label for="search-basic">Select Name:</label> <input type="search" name="search" id="searc-basic" value="" data-mini="true" />

http://jsfiddle.net/6Vu4r/3/

EDIT: Attribute property data-position="fixed" for jQuery Mobile. what he does is disappear in the toolbars when scrolling the screen. How wise, if you click on the screen, it will disappear, and if you touch it again, toolbars will appear. Thus, why your title disappears, if you clicked it the first time, it reappears when you click again. Please remove this attribute if not in use. Hope this helps.

+2
source

As @uDaY said, removing data-position = "fixed" helped me get rid of the @uDay EDIT issues mentioned. @JoshDG In the div data-role = "header" you can try style = "position: fixed" and reinstall if you see any changes in alignment so that your title is fixed. :) Thanks for your decisions and questions.

+2
source

Unfortunately, this is the main jQuery Mobile bug. There are many questions about this, and they set a milestone in the next version (at least 1.3.1). https://github.com/jquery/jquery-mobile/issues/5532

0
source

Source: https://habr.com/ru/post/1401942/

More articles:


All Articles