How to make Jquery Mobile 1.3 ListView(Only) to Right To Left(R2L)?

Question

I have the following html,

http://jsfiddle.net/yWkGR/2/

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">    
        <ul data-role="listview">
                    <li>

        <a href="#">
            <img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
            <div class="left">
                <h3>New Latest One</h3>
                <p>$12,000</p>
            </div>
            <div class="right">
                <input type="text" style="width:75px"/>
            </div>
            </a>
            </li>
              <li>

        <a href="#">
            <img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
            <div class="left">
                <h3>New Latest One</h3>
                <p>$12,000</p>
            </div>
            <div class="right">
                <input type="text" style="width:75px"/>
            </div>
            </a>
            </li>
              <li>

        <a href="#">
            <img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
            <div class="left">
                <h3>New Latest One</h3>
                <p>$12,000</p>
            </div>
            <div class="right">
                <input type="text" style="width:75px"/>
            </div>
            </a>
            </li>
        </ul>

    </div><!-- /content -->

</div><!-- /page -->

The problem is that I need this html to be right to left for my users. Can this is possible without using any third party library?

Answer 1

Solution

Only css used, working jsFiddle example: http://jsfiddle.net/Gajotres/Ajdc4/

You will only need to change icon. I can't do it from here.

.ui-input-text {
    width: 75px;
}

#custom-li .ui-li .ui-btn-text .ui-link-inherit .ui-li-thumb {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    right: 0;
    margin-right: 0 !important;
} 

#custom-li .ui-li .ui-icon {
    left: 10px !important;    
}

#custom-li .ui-li .ui-btn-text .ui-link-inherit .left {
    float: right;
    margin-right: 50px;
    display:block; 
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform:matrix(-1, 0, 0, 1, 0, 0);    
}

#custom-li .ui-li .ui-btn-text .ui-link-inherit .right {
    float: right;
    margin-right: 20px;
    display:block; 
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform:matrix(-1, 0, 0, 1, 0, 0);        
}


#left-split-icon {
    left: 0 !important;   
    border-width: 0 1px 0 0 !important;
}

.ui-li-link-alt { right: auto !important; } // Fix for jQM 1.3

More info

If you want to learn how to do this kind of changes by yourself you should check this article, it will teach you how to do this by yourself.