Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Navbar button icons ignore data-iconpos #2373
jQuery mobile completely ignores this attribute inside data-role="navbar". Passing values such as "left" or "right" does nothing.
<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>
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?
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.
Date: Sun, 6 Apr 2014 09:53:56 -0700
@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