Question

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:

Answer 1

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.