CODEWITHSUNDEEP
jquery-mobile
DeLe
DeLe

Reputation: 2480

How to make some items (in listview) have left icon position

I have a listview in here

I try to change icon from right to left of a item with data-iconpos="left" but it's not working. how to do that thanks

enter image description here

Upvotes: 2

Views: 4994

Answers (3)

Pete - iCalculator
Pete - iCalculator

Reputation: 929

Fernando is correct, within 1.4 you can take that solution. It does however irritate me that we need to add each class to each anchor tag. Cascading? or target every tag. Far, far too much unnecessary low level css in jQuery mobile. far better to target the associated links and then define any specifics thereafter where necessary (using data-icon="home" for example). Don't get me wrong, its a simple framework to use and I have deployed several apps using the framework but it could be a lot lighter and thereby easy to work with when working through source code. Given this, the accepted answer provide a work around (which could be applied parent-child for wider application) but the above is correct approach is working within 1.4 release.

To expand on above (I know original question is for one li but illustrating my point for those whom may be looking for all and keeping the html light)

<ul data-role="listview" class="iconLeft"><li>....</ul>

We apply the class to the parent tag (ul). Then target that tage and children thereof using a cascading approach (CSS... the clue is in the name):

.iconLeft li a {background:#ffffff !important;}
.iconLeft li a{
    padding-left: 2.5em !important;
    padding-right: 1em !important;
}
.iconLeft li a:after{
    right: auto;
    left: 9px;
    transform: scaleX(-1);
}

Not we can target all those li. I use this approach for my panels to get a similar look to google Adsense / analytics which I think is pretty slick.

Upvotes: 0

ezanker
ezanker

Reputation: 24738

I guess data-iconpos is no longer supported in 1.4.

You can use CSS:

<ul data-role="listview" data-inset="true" data-divider-theme="a">
    <li class="iconLeft"><a href="#">Inbox</a></li>
    <li><a href="#">Outbox</a></li>
</ul>
.iconLeft a{
    padding-left: 2.5em !important;
    padding-right: 1em !important;
}
.iconLeft a:after{
    right: auto;
    left: 9px;
    transform: scaleX(-1);
}

Updated DEMO

Upvotes: 2

Fernando Correia
Fernando Correia

Reputation: 22385

With jQuery Mobile 1.4, this worked for me without requiring additional styles:

<div data-role="page" id="demo-page">
    <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="true">
            <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-delete">Option 1</a></li>
            <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-gear">Option 2</a></li>
            <li><a href="#" class="ui-btn ui-btn-icon-left ui-icon-info">Option 3</a></li>
        </ul>
    </div>      
</div>

See demo.

Upvotes: 12

Related Questions