Reputation: 1659
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
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
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