Skip to content
This repository

Top header (and back button) of a nested list doesn't render correctly when parent list has a thumbnail #1595

Closed
andyb opened this Issue May 10, 2011 · 12 comments

3 participants

Andy Britcliffe Todd Parker Mark Matyas
Andy Britcliffe
andyb commented May 10, 2011

Repro code:

<ul data-role="listview">
        <li>
            <img src="http://static.jquery.com/mobile/mobile-devices-1.0a2.png" class="ui-li-thumb" />              
            <ul>
                <li>                    
                    <h3>testing 456</h3>                    
                </li>
            </ul>


        </li>
    </ul>

Clicking into the nested list shows the bug, the top header and back button have been cut off. Using 1.0a4.1

Todd Parker

Hi Andy - Can you post this into a JS Bin or JS Fiddle and also give it a test with the latest code?

Andy Britcliffe
andyb commented May 11, 2011

Sure will do Todd.

Andy Britcliffe
andyb commented May 11, 2011

Hi Todd

Ok jsbin is here http://jsbin.com/egoca4/7/edit and repros using 1.0a4.1 (just click on the list item and you will see the header in the nested list with the back button is covered up) - Is there a published version of the latest code I can test against in a jsbin?

btw love JQM - it's making building great looking phone apps using PhoneGap easy. Thanks for the great work,

Andy Britcliffe
andyb commented May 13, 2011

Ok thanks Todd

jsbin with latest build is here http://jsbin.com/akoga4/2/edit and the issue still repros.

Todd Parker

Thanks, I just assigned this as a high priority.

Mark Matyas

I also ran into this and came up with the following solution; find the following line in _createSubPages:

title = nodeEls.first().text(),//url limits to first 30 chars of text

and replace it with:

title = nodeEls.not('img').first().text(),//url limits to first 30 chars of text

It would be nicer to include elements that contain text rather than not include elements that are images, but this is simple enough and appears to work.

Todd Parker

@mynameistechno - If you can work out a more flexible fix, pelase submit it as a pull request.

Mark Matyas
Mark Matyas
Todd Parker

Thanks, we'll take a look. Appreciate the unit tests!

Ghislain Seguin gseguin referenced this issue from a commit in gseguin/jquery-mobile June 16, 2011
Ghislain Seguin issue #1595: Back button gets clipped when there is no title 00bd49a
scottbw scottbw referenced this issue from a commit June 18, 2011
Commit has since been removed from the repository and is no longer available.
Todd Parker

Looks like this is resolved based on these commutes. Can re-open if there are still issues on this.

Todd Parker toddparker closed this August 07, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.