Navbar button icons ignore data-iconpos #2373

Closed
chal opened this Issue Sep 1, 2011 · 7 comments

Comments

Projects
None yet
5 participants
@chal

chal commented Sep 1, 2011

From the docs
http://jquerymobile.com/demos/1.0b2/docs/toolbars/docs-navbar.html

Icons can be stacked above the labels by adding the data-iconpos="top" attribute to each anchor.

jQuery mobile completely ignores this attribute inside data-role="navbar". Passing values such as "left" or "right" does nothing.

Example:

<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li><a data-icon="arrow-l" data-iconpos="left">Previous</a></li>
            <li><a data-icon="arrow-r" data-iconpos="right">Next</a></li>
        </ul>
    </div><!-- /navbar -->
</div>
@dagvadorj

This comment has been minimized.

Show comment
Hide comment
@dagvadorj

dagvadorj Sep 23, 2011

You are right. It's a bug! I guess those guys won't bother looking at this issue or writing any reply to this. I guess I will give up on jQuery Mobile. It's not worth it; there are too much of this kind of bugs!

You are right. It's a bug! I guess those guys won't bother looking at this issue or writing any reply to this. I guess I will give up on jQuery Mobile. It's not worth it; there are too much of this kind of bugs!

@daphneokeefe

This comment has been minimized.

Show comment
Hide comment
@daphneokeefe

daphneokeefe Apr 5, 2014

Yep, three years later this is still broken. Icon position in navbar buttons/links is still overridden to place the icon at the top.

Yep, three years later this is still broken. Icon position in navbar buttons/links is still overridden to place the icon at the top.

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Apr 6, 2014

Member

@daphneokeefe Can you please give details/example as this is working for me as expected, and you can see that in both our demos and api docs

Member

agcolom commented Apr 6, 2014

@daphneokeefe Can you please give details/example as this is working for me as expected, and you can see that in both our demos and api docs

@daphneokeefe

This comment has been minimized.

Show comment
Hide comment
@daphneokeefe

daphneokeefe Apr 6, 2014

Wow, I am really impressed that people there are listening and responding.

I could clearly see in the generated markup in F12 that the icon-pos was set to top even though my inline markup set it to right.

I found a workaround which was to set icon-pos in the containing navbar rather than in the li-a, so I'm not eager to undo-redo in my code just to prove a point. However, I can tell you I'm using 1.4.1 in Chrome on Windows -- developing on local machine. Maybe it got fixed in 1.4.2?

Daphne O'Keefe

On Apr 6, 2014, at 2:51 AM, "Anne-Gaelle Colom" notifications@github.com wrote:

@daphneokeefe Can you please give details/example as this is working for me as expected, and you can see that in both our demos: http://demos.jquerymobile.com/1.4.2/navbar/
and api docs: http://api.jquerymobile.com/navbar/


Reply to this email directly or view it on GitHub.

Wow, I am really impressed that people there are listening and responding.

I could clearly see in the generated markup in F12 that the icon-pos was set to top even though my inline markup set it to right.

I found a workaround which was to set icon-pos in the containing navbar rather than in the li-a, so I'm not eager to undo-redo in my code just to prove a point. However, I can tell you I'm using 1.4.1 in Chrome on Windows -- developing on local machine. Maybe it got fixed in 1.4.2?

Daphne O'Keefe

On Apr 6, 2014, at 2:51 AM, "Anne-Gaelle Colom" notifications@github.com wrote:

@daphneokeefe Can you please give details/example as this is working for me as expected, and you can see that in both our demos: http://demos.jquerymobile.com/1.4.2/navbar/
and api docs: http://api.jquerymobile.com/navbar/


Reply to this email directly or view it on GitHub.

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Apr 6, 2014

Member

@daphneokeefe the iconpos needs to be set in the navbar, not the individual link.
However, if you want to have icons in the navbar that are not all on the same side, you'll have to manually change the class on the link. Here's an example: http://jsbin.com/megoxayu/2/edit

Member

agcolom commented Apr 6, 2014

@daphneokeefe the iconpos needs to be set in the navbar, not the individual link.
However, if you want to have icons in the navbar that are not all on the same side, you'll have to manually change the class on the link. Here's an example: http://jsbin.com/megoxayu/2/edit

@daphneokeefe

This comment has been minimized.

Show comment
Hide comment
@daphneokeefe

daphneokeefe Apr 6, 2014

Thank yo so much for your help, Anne-Gaelle! I see my mistake now.

I guess I was assuming that properties set on the parent could be overridden on the child. I only have one li-a button in my navbar, which I did as a way of fixing the button's position, beneath the header and at the top of the content, when the user scrolls down this particular page. I suppose mixing iconpos on multiple buttons -- by setting that property on the li-a instead of the parent navbar -- could create a suboptimal UI.

Daphne

Date: Sun, 6 Apr 2014 09:53:56 -0700
From: notifications@github.com
To: jquery-mobile@noreply.github.com
CC: daphneokeefe@hotmail.com
Subject: Re: [jquery-mobile] Navbar button icons ignore data-iconpos (#2373)

@daphneokeefe the iconpos needs to be set in the navbar, not the li.

However, if you want to have icons in the navbar that are not all on the same side, you'll have to manually change the class on the link. Here's an example: http://jsbin.com/megoxayu/1/edit


Reply to this email directly or view it on GitHub.

Thank yo so much for your help, Anne-Gaelle! I see my mistake now.

I guess I was assuming that properties set on the parent could be overridden on the child. I only have one li-a button in my navbar, which I did as a way of fixing the button's position, beneath the header and at the top of the content, when the user scrolls down this particular page. I suppose mixing iconpos on multiple buttons -- by setting that property on the li-a instead of the parent navbar -- could create a suboptimal UI.

Daphne

Date: Sun, 6 Apr 2014 09:53:56 -0700
From: notifications@github.com
To: jquery-mobile@noreply.github.com
CC: daphneokeefe@hotmail.com
Subject: Re: [jquery-mobile] Navbar button icons ignore data-iconpos (#2373)

@daphneokeefe the iconpos needs to be set in the navbar, not the li.

However, if you want to have icons in the navbar that are not all on the same side, you'll have to manually change the class on the link. Here's an example: http://jsbin.com/megoxayu/1/edit


Reply to this email directly or view it on GitHub.

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Apr 6, 2014

Member

You're very welcome Daphne and I'm glad I was able to help :-)

Member

agcolom commented Apr 6, 2014

You're very welcome Daphne and I'm glad I was able to help :-)

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