CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Sagar Rawal
Sagar Rawal

Reputation: 399

Align icons at left and Right corner of navbar of jQuery Mobile

I'm using below code to add nav bar to my mobile website. Here I have two icon on the left side of nav bar. But I want to position the Next icon to the Right Side such that Two icon will be on corner of left and Right Side.

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  

    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>


 




    <div data-role="page">      

   
        <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
            <div data-role="navbar" data-iconpos="left">
                <ul>
                    <li><a href="#one" data-icon="arrow-l" >Previous</a></li>
                    <li><a href="#two" data-icon="arrow-r" >Next</a></li>
                   
                </ul>
            </div><!-- /navbar -->                             
        </div> 

    </div>

Here is the picture, I'd like to get the outputenter image description here

For some Reason the code is not working , So here is the link for my demo snippet Demo Snippets

Upvotes: 0

Views: 506

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

You have to add some css fo this

.ui-block-b a .ui-btn-inner .ui-icon{
  left: auto;
  right: 5px;
}

Updated Codepen

Upvotes: 1

Related Questions