CODEWITHSUNDEEP
htmlcssjquery-mobile
Nick K
Nick K

Reputation: 23

List item in jQuery Mobile navbar smaller than others

So I'm trying to add a navbar to the footer of my pages in jQuery Mobile, with three list items. The first and last are data icons, while the one in the middle is simple text. The problem is that the middle item (Contact Us) is shorter than the other two, and I can't figure out a way to get them to all be equal sizes. Here is my code:

<div data-role="page" id="pageone">
  <div data-role="header" data-position="fixed">
    <h1 style="width:90%; margin:0 auto;">Title</h1>
  </div>


    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="home"></a></li>
                <li><a href="#" class="ui-btn-active">Contact Us</a></li>
                <li><a href="#" data-icon="home"></a></li>
            </ul> 
        </div>
    </div>
</div>

Any ideas?

Here is a Fiddle. Thanks!

Upvotes: 2

Views: 279

Answers (1)

Manwal
Manwal

Reputation: 23836

I have added simple padding on contact us Hyperlink:

.contact-us{padding: 12px;}

Here is footer markup:

<div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="home"></a></li>
                <li><a href="#" class="ui-btn-active contact-us">Contact Us</a></li>
                <li><a href="#" data-icon="home"></a></li>
            </ul> 
        </div>
    </div>

DEMO

Note: This height issue is just because of Icon on Navbar taking different height them text. Use custom css is pretty nice idea.

Upvotes: 2

Related Questions