Navbar button icons ignore data-iconpos

[chal]

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]

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]

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]

@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]

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]

@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]

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]

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