header - Jquery Mobile not displaying data-icons (correctly) -
so, i'm adding popup menu off header , works... works quite except 1 small thing. life of me can't display icons way want them!
in first <li> brute force data-icon <li> , shows not positioned left. in others, left data-icon i'm accustomed leaving them (where work correctly everywhere else) , don't display @ all.
any suggestions?
<div id="header" data-role="header" data-theme="b"> <h1>myapp</h1> <a href="#popupmenu" data-rel="popup" data-transition="slide" data-icon="bars" class="ui-btn-right"> menu </a> <div data-role="popup" id="popupmenu" data-theme="b"> <ul data-role="listview" data-inset="true"> <li data-icon="gear" data-iconpos="left"><a href="#">settings</a></li> <li><a href="#" data-icon="location">gps</a></li> <li><a href="#" data-icon="info">about</a></li> </ul> </div> </div> <!-- /header -->
the data-iconpos attribute not defined regular list items, works when < li> item inside navbar widget: http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp
please, take fiddle made: https://jsfiddle.net/xbo8npng/1/
i have placed icons left using css:
<div id="header" data-role="header" data-theme="b"> <h1>myapp</h1> <a href="#popupmenu" data-rel="popup" data-transition="slide" data-icon="bars" class="ui-btn-right"> menu </a> <div data-role="popup" id="popupmenu" data-theme="b"> <ul data-role="listview" data-inset="true"> <li class="left" data-icon="gear"><a href="#">settings</a></li> <li class="left"><a href="#" data-icon="location">gps</a></li> <li class="left"><a href="#" data-icon="info">about</a></li> </ul> </div> </div>
and styles:
.left a{ padding-left: 2.5em !important; padding-right: 1em !important; } .left a:after{ left: 2px; right: auto; }
i hope helps you!
Comments
Post a Comment