Geek Answers Handbook

Problems using icon only without text in navigation bar in jQuery mobile footer

This is the code I'm using:

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header" data-theme="b"> <h1>Home</h1> </div> <div data-role="content" data-theme="b"> </div> <div data-role="footer" data-position="fixed" data-id="pFooter"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="custom" class="ui-btn-active" >Home</a></li> <li><a href="#first" data-icon="grid">Page1</a></li> <li><a href="#" data-icon="star">Page2</a></li> <li><a href="#" data-icon="arrow-r" data-iconpos="notext"></a></li> </ul> </div> </div> </div> </body> </html>

You can see it in action here http://jsfiddle.net/PJWQr/

The problem I am facing is that in the last button, where I use data-iconpos="notext" , the height of the interactive area is less than the other buttons on the navigation bar.

Please let me know how to fix this.

+4
source share
5 answers

In fact, you do not need iconpos="notext" , since it is not technically a button.

Remove this attribute and add whitespace to the contents of element a :

 <li><a href="#" data-icon="arrow-r">&nbsp;</a></li>
+11
source

Probably easy (the view is quick and dirty, but I'm heading to bed, so this is what you get;) is just a character: http://jsfiddle.net/PJWQr/2/

+1
source 
 <a id="xyz" data-icon="grid" href="#" data-iconpos="notext">&nbsp;</a>

You can use this to avoid extra spaces in the button.

+1
source

You can do this to remove the drive ... for those looking for it in the future. Add this to your button element:

data iconshadow = "false"

0
source

Your anchor tag should contain some text for assistive technologies such as screen readers. A &nbsp; not enough. You have several options:

Include some plain old text:

 <li><a href="#" data-icon="arrow-r">Next</a></li>

Use aria-label :

 <li><a href="#" data-icon="arrow-r" aria-label="Next">&nbsp;</a></li>

Use something like Bootstrap sr-only CSS Class:

 <li><a href="#" data-icon="arrow-r"><span class="sr-only">Next</span></a></li>
0
source

More articles:


All Articles