user609886
user609886

Reputation: 1659

Aligning Content in JQuery Mobile

JQuery Mobile is AWESOME! However, I'm trying to align some pre-styled content. I have a list that uses the count bubbles as detailed here: http://jquerymobile.com/demos/1.1.0-rc.1/docs/lists/lists-count.html

I really want to be able to left-align the bubble. However, no matter what I do, it is right-aligned. Is there a way to make the bubble the left most element then have a title/subtitle format?

Thanks!

Upvotes: 2

Views: 5960

Answers (2)

Daniel Lorenz
Daniel Lorenz

Reputation: 4336

After the DOM loads, try doing something like this:

$(".ui-li-aside").css('float','left');

Might be .ui-li-count instead

You can also change this class in the mobile.css file to just be float left from the start, too.

Upvotes: 0

Jasper
Jasper

Reputation: 75993

You can alter the CSS for the .ui-li-count element like so:

/*target the count bubbles and left align them, by default they are right aligned*/
.ui-page .ui-content .ui-listview .ui-li-count {
    left  : 10px;
    right : auto;
}

/*target the link in which the count bubbles reside and add some padding so the bubbles and link text don't overlap*/
/*notice this is only applied to list-items that actually have count bubbles*/
.ui-page .ui-content .ui-listview .ui-li-has-count .ui-btn-text a {
    padding-left : 55px;
}

​ Here is a demo: http://jsfiddle.net/vAjDn/1/ (Notice the list-item without a count bubble doesn't get indented)

Here is a quick demonstration of the HTML applied to list-items in a listview widget:

<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-btn-up-c">
    <div class="ui-btn-inner ui-li">
        <div class="ui-btn-text">
            <a href="index.html" class="ui-link-inherit">
                Inbox
                <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">12</span>
            </a>
        </div>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
    </div>
</li>

Upvotes: 3

Related Questions