Databases
StackOverflow2013
Postsdbo
POStyling jquery mobile listviews
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStyling jquery mobile listviews
    text
    copied!<p>im trying to style a listview control but im having problems... when i set width of image to 40px as shown in markup. i cant seem to get the content to align properly to the left. ie. i dnt want that gap between image and text. here is my markup</p> <pre><code> &lt;ul data-role="listview" class="ui-listview" data-inset="true" role="listbox"&gt; &lt;li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c" style='font-size:8pt;font-weight:normal'&gt; &lt;?php echo fmtDate($x-&gt;date); ?&gt;,&lt;?php echo $name; ?&gt; wrote on &lt;?php echo $wname; ?&gt;'s wall &lt;span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:55px;background: url(../images/comment.png) no-repeat;padding:3px;padding-left:20px'&gt;34&lt;/span&gt; &lt;span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:5px;background: url(../images/like.gif) no-repeat;padding:3px;padding-left:20px'&gt;442&lt;/span&gt; &lt;/li&gt; &lt;li role="option" tabindex="0" data-theme="c" &gt; &lt;a href='#'&gt; &lt;img width="40" height="40" src='&lt;?php echo $imgstr; ?&gt;'/&gt; &lt;div style='font-size:9pt;font-weight:normal;'&gt;&lt;?php echo nl2br(addSmilies(urlize(trim($x-&gt;msg))));?&gt;&lt;/div&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>just to clarify this is the markup i get from 'inspect element'</p> <pre><code>&lt;ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" role="listbox"&gt; &lt;li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c ui-corner-top ui-btn-up-undefined" style="font-size:8pt;font-weight:normal"&gt; Today, 55 minute(s) ago,Maggie Ferguson wrote on Maggie's wall &lt;span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:55px;background: url(../images/comment.png) no-repeat;padding:3px;padding-left:20px"&gt;34&lt;/span&gt; &lt;span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:5px;background: url(../images/like.gif) no-repeat;padding:3px;padding-left:20px"&gt;442&lt;/span&gt; &lt;/li&gt; &lt;li role="option" tabindex="-1" data-theme="c" class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c"&gt;&lt;div class="ui-btn-inner"&gt;&lt;div class="ui-btn-text"&gt; &lt;a href="#" class="ui-link-inherit"&gt; &lt;img width="40" height="40" src="../members/mariamjohnson/media/878_thumb.jpg" class="ui-li-thumb ui-corner-bl"&gt; &lt;div style="font-size:9pt;font-weight:normal;"&gt;WAIT A MINUTE,GWE DAN CAN YOU PLEASE BEHAVE YOURSELF,IF YOU HAVE NOTHING TO DO ,GO GET YOURSELF WASTED ELSEWHERE,YOU ARE ABUSIVE AND YOU ARE BEGINING TO IRRETATE ME LIKE A RASH.GURU CHAIN HIM UP,HE SHOULD NOT SPEAK UNTIL SPOKEN TO ,OK?&lt;/div&gt; &lt;/a&gt; &lt;/div&gt;&lt;span class="ui-icon ui-icon-arrow-r"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>looks like jquery mobile adds extra and classes to the mrkup... any solutions? <img src="https://i.stack.imgur.com/y5lR0.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload