CODEWITHSUNDEEP
jquery-mobile
Muhammad
Muhammad

Reputation: 349

JQuery Mobile Collapsible Text Orientation (Position)

I am developing something in a Right-To-Left (RTL) language and I need the text in the collapsible to be positioned on the right as opposed to the default left.

Here is the code:

<div id="content_c1" data-role="collapsible" data-iconpos="right" align="right">
    <h3>Right to Left Text</h3>
    <p>Right to Left Content</p>
</div>
<div id="content_c2" data-role="collapsible">
    <h3></h3>
    <p></p>
</div>

The first collapsible is Right to Left. The data-iconpos="right" nicely movees the icon to the right and the align="right" moves the content in the <p> to the right. But the text shown in <h3> stays on the left.

Thanks for the help in advance.

Upvotes: 1

Views: 1966

Answers (3)

Ali Khatami
Ali Khatami

Reputation: 379

Having the same problem...

This one solved it :

.ui-collapsible-heading .ui-btn  {
            text-align: right;
}

Upvotes: 0

Sergey Dirin
Sergey Dirin

Reputation: 435

This is working for me:

.ui-collapsible h3 .ui-btn-inner
{
    text-align:right;
}

Upvotes: 1

codaniel
codaniel

Reputation: 5253

I'm sure there is a better way but you could try this.

.ui-btn-text{float:right}​

Upvotes: 0

Related Questions