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

jsfiddle

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

Popular posts from this blog

gridview - Yii2 DataPorivider $totalSum for a column -

java - Suppress Jboss version details from HTTP error response -

Sass watch command compiles .scss files before full sftp upload -