lists-search-with-dividers breaks fixed footer #2348

Closed
WizX20 opened this Issue Aug 27, 2011 · 7 comments

Comments

Projects
None yet
4 participants
@WizX20

WizX20 commented Aug 27, 2011

When you use a fixed footer with a list-search and start typing, the footer will move "up" in ten page.

Example:
[code]

<title>Festival</title>

<script type="text/javascript" src="/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.mobile-1.0b2.min.js"></script>

<link rel="stylesheet" href="/css/jquery.mobile-1.0b2.min.css" />
<style type="text/css">
    /* 
        HEADER 
    */
    #header { }

        #header .wrapper {
            padding: 5px;
        }

            #header .wrapper h1 {
                color: #bac0c0;
                text-shadow: 0 1px 1px #fff;
                display: inline;
                font-size: 20px;
                margin-left: 20px;
            }

            #header .wrapper a {
                height: auto;
                border: none;
            }

            #header .wrapper img {
                height: auto;
            }

    /* 
        CONTENT 
    */
    #content { }

        #content .title img {
            display: inline;
        }

        #content .title {
            margin: 20px 0 10px 0;
        }

        #content .title.first {
            margin: 0 0 10px 0;
        }

        #content .title h1 {
            font-size: 18px;
            display: inline;
            margin-left: 5px;
        }

        #content .wrapper {
            border: 1px solid #cccccc;
            padding: 30px;
        }

            #content .wrapper.list-search {
                overflow-x: hidden;
                overflow-y: hidden;
                position: relative;
                height: 200px;
            }

    /*
        NAVIGATION 
    */
    #navigation .ui-btn .ui-icon {
        width: 30px!important;
        height: 30px!important;
        margin-left: -15px !important;
        box-shadow: none!important;
        -moz-box-shadow: none!important;
        -webkit-box-shadow: none!important;
        -webkit-border-radius: none !important;
        border-radius: none !important;
    }

        #navigation .ui-btn-inner {
            padding: 0px;
            height: 60px;
        }

        #navigation .ui-btn-text {
            display: block;
            margin-top: 40px;
        }

        #navigation .ui-icon {
            display: block;
            background: url(/images/icons/menu/note.png) 50% 50% no-repeat;
            background-size: 24px 22px;
        }

        #btnCalendar .ui-icon  {
            background: url(/images/icons/menu/calendar.png) 50% 50% no-repeat;
        }

        #btnMap .ui-icon {
            background: url(/images/icons/menu/map.png) 50% 50% no-repeat;
        }

        #btnArtists .ui-icon {
            background: url(/images/icons/menu/note.png) 50% 50% no-repeat;
        }

        #btnOptions .ui-icon {
            background: url(/images/icons/menu/gear.png) 50% 50% no-repeat;
        }


    /*
        UI OVERRIDES
    */
    [data-role="header"] .ui-btn-corner-all {
          -moz-border-radius: 0;
          -webkit-border-radius: 0;
          border-radius: 0;
    }

    [data-role="content"] .ui-btn-inner {
        border-left: 1px solid #b2b2b2;
        border-right: 1px solid #c4c4c4;
    }
</style>
Home

Festival-Naam

favorites

Favorieten

        <div class="title">
            <img src="/images/icons/newspaper.png" alt="Festivals and Events" />
            <h1>Festivals & Events</h1>
        </div>
        <div class="wrapper">
            <div id="listSearch">
                <ul data-role="listview" data-filter="true" data-filter-placeholder="Type to search..." data-filter-theme="b">
                    <li data-role="list-divider">A</li>
                    <li><a href="index.htm">Adam Kinkaid</a></li>
                    <li><a href="index.htm">Alex Wickerham</a></li>
                    <li><a href="index.htm">Avery Johnson</a></li>
                    <li data-role="list-divider">B</li>
                    <li><a href="index.htm">Bob Cabot</a></li>
                    <li data-role="list-divider">C</li>
                    <li><a href="index.htm">Caleb Booth</a></li>
                    <li><a href="index.htm">Christopher Adams</a></li>
                    <li><a href="index.htm">Culver James</a></li>
                    <li data-role="list-divider">D</li>
                    <li><a href="index.htm">David Walsh</a></li>
                    <li><a href="index.htm">Drake Alfred</a></li>
                    <li data-role="list-divider">E</li>
                    <li><a href="index.htm">Elizabeth Bacon</a></li>
                    <li><a href="index.htm">Emery Parker</a></li>
                    <li><a href="index.htm">Enid Voldon</a></li>
                    <li data-role="list-divider">F</li>
                    <li><a href="index.htm">Francis Wall</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="footer" data-id="footerMain" data-position="fixed">
        <div data-role="navbar">
            <ul id="navigation">
                <li>
                    <a href="agenda.htm" id="btnCalander" data-icon="custom">Agenda</a>
                </li>
                <li>
                    <a href="map.htm" id="btnMap" data-icon="custom">Kaart</a>
                </li>
                <li>
                    <a href="artists.htm" id="btnArtists" data-icon="custom">Artiesten</a>
                </li>
                <li>
                    <a href="options.htm" id="btnOptions" data-icon="custom">Instellingen</a>
                </li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
[/code]
@WizX20

This comment has been minimized.

Show comment
Hide comment
@WizX20

WizX20 Aug 27, 2011

Github messes up the code blocks, hope the example is still clear.

WizX20 commented Aug 27, 2011

Github messes up the code blocks, hope the example is still clear.

@gseguin

This comment has been minimized.

Show comment
Hide comment
@gseguin

gseguin Aug 27, 2011

Member

@WizX20 Thanks for reporting the issue. It's much more convenient for us if you put that code in jsbin or jsfiddle and put a pointer to it in the bug report.

Member

gseguin commented Aug 27, 2011

@WizX20 Thanks for reporting the issue. It's much more convenient for us if you put that code in jsbin or jsfiddle and put a pointer to it in the bug report.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 5, 2011

Contributor

Yes, as gseguin noted, this example isn't usable. Please post this on jsbin or jsfiddle.

Contributor

toddparker commented Sep 5, 2011

Yes, as gseguin noted, this example isn't usable. Please post this on jsbin or jsfiddle.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 5, 2011

Contributor

Thanks for the fast reply. We'll take a look.

Contributor

toddparker commented Sep 5, 2011

Thanks for the fast reply. We'll take a look.

@ghost ghost assigned jblas Oct 6, 2011

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 7, 2011

Same issue here.
I've made a very simple example that reproduce the bug : http://jsbin.com/izahed/4/

ghost commented Oct 7, 2011

Same issue here.
I've made a very simple example that reproduce the bug : http://jsbin.com/izahed/4/

@jblas jblas closed this in 773497b Oct 14, 2011

@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Oct 19, 2011

Contributor

Just an update on this ... I renamed the custom event used to fix this problem from "contentmodified" to "updatelayout".

3130b52

Contributor

jblas commented Oct 19, 2011

Just an update on this ... I renamed the custom event used to fix this problem from "contentmodified" to "updatelayout".

3130b52

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment