New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

Projects
None yet
3 participants
@andyb

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 10, 2011

Contributor

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

Contributor

toddparker commented May 10, 2011

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

@andyb

This comment has been minimized.

Show comment
Hide comment
@andyb

andyb May 11, 2011

Sure will do Todd.

andyb commented May 11, 2011

Sure will do Todd.

@andyb

This comment has been minimized.

Show comment
Hide comment
@andyb

andyb 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,

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,

@andyb

This comment has been minimized.

Show comment
Hide comment
@andyb

andyb May 13, 2011

Ok thanks Todd

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

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.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 13, 2011

Contributor

Thanks, I just assigned this as a high priority.

Contributor

toddparker commented May 13, 2011

Thanks, I just assigned this as a high priority.

@mynameistechno

This comment has been minimized.

Show comment
Hide comment
@mynameistechno

mynameistechno May 15, 2011

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.

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.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 16, 2011

Contributor

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

Contributor

toddparker commented May 16, 2011

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

@mynameistechno

This comment has been minimized.

Show comment
Hide comment
@mynameistechno

mynameistechno May 16, 2011

Hey,

I was thinking of working in a data-role="list-title" attribute that
would indicate which element's text should be used as the page title
for the nested list. If no data-role is found then it would fall back
to using the first non-image element. Thoughts? I have this working
locally, but wanted to run it by somebody before sending a pull
request. Also, if this approach sounds acceptable, should I update
some of the example code to indicate usage of the data-role or
something?

I have an unrelated question you might know the answer to ... when I
diff or view my git commits on github they show that the whole file
has changed even though only 1 line changed. I'm guessing this has
something to do with newline endings - any clue? I'm developing in
NetBeans 7 on Windows 7. Also, are there any coding guidelines or
standards for the project? e.g. tab width settings, etc. I just want
to make sure I'm sticking to existing conventions.

Thanks!
Mark

On Mon, May 16, 2011 at 7:28 AM, toddparker
reply@reply.github.com
wrote:

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

Reply to this email directly or view it on GitHub:
#1595 (comment)

Hey,

I was thinking of working in a data-role="list-title" attribute that
would indicate which element's text should be used as the page title
for the nested list. If no data-role is found then it would fall back
to using the first non-image element. Thoughts? I have this working
locally, but wanted to run it by somebody before sending a pull
request. Also, if this approach sounds acceptable, should I update
some of the example code to indicate usage of the data-role or
something?

I have an unrelated question you might know the answer to ... when I
diff or view my git commits on github they show that the whole file
has changed even though only 1 line changed. I'm guessing this has
something to do with newline endings - any clue? I'm developing in
NetBeans 7 on Windows 7. Also, are there any coding guidelines or
standards for the project? e.g. tab width settings, etc. I just want
to make sure I'm sticking to existing conventions.

Thanks!
Mark

On Mon, May 16, 2011 at 7:28 AM, toddparker
reply@reply.github.com
wrote:

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

Reply to this email directly or view it on GitHub:
#1595 (comment)

@mynameistechno

This comment has been minimized.

Show comment
Hide comment
@mynameistechno

mynameistechno May 17, 2011

Nvm, fixed the "every-line-marked-as-changed-on-commit" issue.

I have sent a pull request for a potential fix for issue 1595,
including 2 unit tests. I believe the solution is flexible enough by
introducing a data-role="list-title" which is added to the child
element which should be used as the source of the title. It falls back
to first non-image element if data-role="list-title" not present.

Let me know what you think. thx
-Mark

On Mon, May 16, 2011 at 3:30 PM, Mark Matyas mynameistechno@gmail.com wrote:

Hey,

I was thinking of working in a data-role="list-title" attribute that
would indicate which element's text should be used as the page title
for the nested list. If no data-role is found then it would fall back
to using the first non-image element. Thoughts? I have this working
locally, but wanted to run it by somebody before sending a pull
request. Also, if this approach sounds acceptable, should I update
some of the example code to indicate usage of the data-role or
something?

I have an unrelated question you might know the answer to ... when I
diff or view my git commits on github they show that the whole file
has changed even though only 1 line changed. I'm guessing this has
something to do with newline endings - any clue? I'm developing in
NetBeans 7 on Windows 7. Also, are there any coding guidelines or
standards for the project? e.g. tab width settings, etc. I just want
to make sure I'm sticking to existing conventions.

Thanks!
Mark

On Mon, May 16, 2011 at 7:28 AM, toddparker
reply@reply.github.com
wrote:

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

Reply to this email directly or view it on GitHub:
#1595 (comment)

Nvm, fixed the "every-line-marked-as-changed-on-commit" issue.

I have sent a pull request for a potential fix for issue 1595,
including 2 unit tests. I believe the solution is flexible enough by
introducing a data-role="list-title" which is added to the child
element which should be used as the source of the title. It falls back
to first non-image element if data-role="list-title" not present.

Let me know what you think. thx
-Mark

On Mon, May 16, 2011 at 3:30 PM, Mark Matyas mynameistechno@gmail.com wrote:

Hey,

I was thinking of working in a data-role="list-title" attribute that
would indicate which element's text should be used as the page title
for the nested list. If no data-role is found then it would fall back
to using the first non-image element. Thoughts? I have this working
locally, but wanted to run it by somebody before sending a pull
request. Also, if this approach sounds acceptable, should I update
some of the example code to indicate usage of the data-role or
something?

I have an unrelated question you might know the answer to ... when I
diff or view my git commits on github they show that the whole file
has changed even though only 1 line changed. I'm guessing this has
something to do with newline endings - any clue? I'm developing in
NetBeans 7 on Windows 7. Also, are there any coding guidelines or
standards for the project? e.g. tab width settings, etc. I just want
to make sure I'm sticking to existing conventions.

Thanks!
Mark

On Mon, May 16, 2011 at 7:28 AM, toddparker
reply@reply.github.com
wrote:

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

Reply to this email directly or view it on GitHub:
#1595 (comment)

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 17, 2011

Contributor

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

Contributor

toddparker commented May 17, 2011

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

gseguin pushed a commit to gseguin/jquery-mobile that referenced this issue Jun 17, 2011

scottjehl pushed a commit that referenced this issue Jun 17, 2011

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Aug 8, 2011

Contributor

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

Contributor

toddparker commented Aug 8, 2011

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

@toddparker toddparker closed this Aug 8, 2011

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