Response title
This is preview!
About data-iconpos="notext" problem with navbar
in Developing jQuery Mobile
•
9 years ago
I have try the serveral versions jquery-1.9.1, jquery.mobile-1.3.2 or 1.31,but still have some problem in the notext with the navbar.
the html code:
<div data-theme="c" data-role="footer" data-position="fixed" class="footer" >
<div data-role="navbar" class="footer" data-iconpos="notext" align="center">
<ul>
<li ><a href="#page1" id="btn-prdprio" data-icon="custom" data-transition="slide">优势</a></li>
<li><a href="#page2" id="btn-special" data-icon="custom" data-transition="slide" >特色</a></li>
<li data-iconpos="notext"><a href="#page3" id="btn-logomenu" data-icon="custom" data-transition="slide">111</a></li>
<li><a href="#page4" id="btn-case" data-icon="custom" data-transition="slide">案例</a></li>
<li><a href="#page5" id="btn-contactus" data-icon="custom" data-transition="slide" >我们</a></li>
</ul>
</div>
</div>
</div>
when I set the data-iconpos="notext", I can not make the custom Icon's position in the middle. the Icon is not left, not middle,and still not right,although I try kinds of sets in CSS.
now the CSS:
.footer .ui-btn{margin-left:0;}
.footer .ui-btn .ui-btn-inner {
padding-top:0px !important;
width:100% !important;
height:51px;
/*background:url(./images/menu_up/bg.gif) 50% 50%;background-size:100% 100%;*/
}
.footer .ui-btn-icon-notext{
position:inherit;
width:100%;
height:100%;
float:none;
padding:0;
margin-left:0;
}
.footer .ui-icon {position:relative;
float:none;
width: 72px !important;
height: 51px !important;
margin-left: 10px !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
}
#btn-prdprio .ui-icon{background:url(./images/menu_up/prdprio.png) no-repeat 50% 50%;background-size:45px 42px;}
and the pictures show my problem in different size of screen.
1