CODEWITHSUNDEEP
jqueryjquery-mobilecordovanativedroid
David Rabinowitz
David Rabinowitz

Reputation: 30448

Header height changes in jQuery mobile in response to click

I have a page in a jQuery mobile phonegap application, and it behaves strangely. Whenever I click the body (content) the header increases is height. From examining the elements, it seems the H1 title moves to the right and bottom in response to the click, increasing its distance from the icon on the left. I use jquery mobile 1.3.2, with nativeDroid 2.2.0. My code is as follows:

<div data-role="page" id="feedbackPage" data-theme="b">

    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Feedback</h1>
        <a href="#feedbackPagePanel" data-icon='reorder' data-iconpos="notext"></a>
    </div>
    <div data-role="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <form>
            <textarea cols="40" rows="8" name="feedback" id="feedback"></textarea>
            <button type="submit" name="submitfeedback" id="submitfeedback">Send</button>
        </form>
        </p>
    </div>

    <div data-role="panel" id="feedbackPagePanel">
        <ul data-role="listview">
            <li data-icon="home"><a href="#homePage">Home</a></li>
            <li data-icon="envelope"><a href="#feedbackPage">Feedback</a></li>
            <li data-icon="cog"><a href="#settingsPage">Settings</a></li>
            <li data-icon="info"><a href="#aboutPage">About</a></li>
        </ul>
    </div>
    <!-- /panel -->
</div>

It happens on other pages as well, even though they contain listview (with static content, not links).

Here is how the page should look like:

Good behavior

Here is what happens after clicking on the text. Notice the title has moved to the right and bottom

Bad behavior

A second click restores the size to the original position. How I can I prevent this?

Upvotes: 0

Views: 1568

Answers (1)

ezanker
ezanker

Reputation: 24738

jQM seems to toggle a class called ui-fixed-hidden in the header when you click the text. Try adding the following CSS to override that added padding:

.ui-header.ui-fixed-hidden {
    padding: 0;
    border-top-width: 1px;
    border-bottom-width: 2px;
}
.ui-header-fixed > .ui-btn-icon-notext{
    top:6px
}

UPDATE: added css to keep icon in place, and fixed bottom border CSS to keep width constant. Here is a fiddle demo: DEMO

UPDATE 2:

Instead of the CSS fix above, you can try the data-tap-toggle="false" attribute on your header, or in javascript:

$( ".selector" ).fixedtoolbar({ tapToggle: false });

Here is the API documentation:http://api.jquerymobile.com/fixedtoolbar/#option-tapToggle and here is the updated demo: DEMO 2

Upvotes: 4

Related Questions