jQuery mobile: navbar data-iconpos overrides button attributes

Ran into this today as I was moving from a standard footer with optional buttons to a fixed footer laid out as a navbar as shown here.


Not a big deal, but I had started defining my data-iconpos values (left | right | top | bottom | notext) at the button level, which is where you need to do it usually. However when the buttons are wrapped inside a navbar widget, it has its own data-iconpos attribute. Makes sense, you can set it at the top level and not have to manage each button individually. Also making sense is the fact that the default value for a navbar widget is “top” vs. the button widget’s default value of “left”. In the navbar layout icons on top really does looks better.

What I didn’t see coming was that setting, or even just leaving the default by not explicitly setting, the data-iconpos as the navbar level enforces the layout of all the buttons, and the data-iconpos setting on the buttons has no effect. Kind of a reverse cascade I guess. :-)

<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<!-- this data-iconpos value will have no effect -->
<li><a href="@Url.Action("Index","Home")" data-role="button" data-iconpos="left" data-icon="home">Home</a></li>
<li><a href="@Url.Action("Index","Home")" data-role="button" data-icon="search">Search</a></li>
<li><a href="@Url.Action("Index","Home")" data-role="button" data-icon="gear">Settings</a></li>

About me

.NET developer in upstate NY, USA
Current focus technologies: WPF, WCF
Intrigued by: Functional programming ala F#, Code Analysis, Math
Hobbies: this blog, go figure

Month List