0

I would like to have the "lorem ipsum" text extend as far as possible to the right. However, when I add the "Some Text" label to the right side of the listview, the "lorem ipsum" text no longer breaks as far to the right as it did without it. How do I have to override the CSS classes in order to get the desired format? (I have tried to override the JQ mobile CSS files (.ui-li-aside formats the label I believe). See the jsfiddle link for an example with the label and without.

http://jsfiddle.net/soa9k46w/1/

<div data-role="content">
    <ul data-role="listview" data-icon="false">
        <li>    <a href="#">

                      <h2>Some Title</h2>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                      </a>

            <p class="ui-li-aside ui-li-count"><strong> Some Text</strong>
            </p>
        </li>
    </ul>
</div>
James Conr
  • 65
  • 2
  • 6

1 Answers1

0

To make it match the second example in your fiddle, you could override the class that is being assigned to the anchor element with children, e.g.:

.ui-listview > .ui-li-has-count > .ui-btn {
    padding-right: 1em !important;
}

Example

Note: using !important is not ideal, but in this case it is required to override the default jQuery Mobile style that is adding a 2.8125em padding-right value to that anchor.

Another (possibly better) alternative is to use jQuery to remove the ui-li-has-count class from any li elements that have been given it:

$('.ui-btn').closest('li').removeClass('ui-li-has-count');

If you don't want this to affect your entire site, make it specific, e.g. 

$('#your_container').find('.ui-btn').closest('li').removeClass('ui-li-has-count');

Example

Community
  • 1
  • 1
scrowler
  • 24,273
  • 9
  • 60
  • 92
  • Great explanation and thank you! I am having quite some trouble getting Jquery to do what I want it to do. Another problem croped up: http://stackoverflow.com/questions/25600475/jquery-mobile-listview-cropping-thumbnail-image How did you learn the jQ class structure and what classes to modify? – James Conr Sep 01 '14 at 07:08
  • Use the element inspector to example the DOM elements – scrowler Sep 01 '14 at 09:07