CODEWITHSUNDEEP
htmljquery-mobilecordova
JoshDG
JoshDG

Reputation: 3931

jQuery Mobile Phonegap iOS: Header flickers when I pull up keyboard

Title pretty much sums it up. I have a fixed persistent header via: 

<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 via:

<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 header turns solid white then flicks back to the proper header.

Ideas?

My screen looks like this:Sim Screen

Upvotes: 4

Views: 3021

Answers (3)

Nguyen Minh Binh
Nguyen Minh Binh

Reputation: 24443

Unfortunately, this is a major bug of jQuery Mobile. There are many issue is opening about this and they are set the milestone at next release (at least 1.3.1). https://github.com/jquery/jquery-mobile/issues/5532

Upvotes: 0

surendran
surendran

Reputation: 476

As @uDaY told, removing data-position="fixed", helped me get rid of issues mentioned @uDay's EDIT. @JoshDG In div data-role="header" you can try style="position:fixed" and realign if you see any change in alignment, to make your header fixed. :) Thank you for your solutions and questions.

Upvotes: 2

uday
uday

Reputation: 8730

You can use a <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: Its the property of the data-position="fixed" attribute of jQuery Mobile. what it does is It vanishes the toolbars when scrolling of the screen does.Like wise if you tap on screen it vanishes & if you tap again it shows up the toolbars. So thats why your header is vanished if u clicked for the 1st time again it pops up back when you click again. Please remove that attrib if its not in use. Hope it helps.

Upvotes: 2

Related Questions