Recently we had the requirement in our mobile web app which is using jQuery mobile to use a two-column grid view. Inside the columns a listview should display some data (data-role=listview). Out of the box that doesn’t look good with jQuery Mobile 1.2 as margins and paddings of the containers outside the listviews are messed up.

But its surpringly easy to alter the paddings and margins so that it looks as expcted when displaying two listviews next to each other:

		<div data-role="content" style="padding: 0;">

			<div class="ui-grid-a" style="padding: 15px;" >
				<div class="ui-block-a">
					<ul data-role="listview" data-theme="e">
						<li data-role="fieldcontain"><a>Eins</a></li>
						<li data-role="fieldcontain"><a>Zwei</a></li>
						<li data-role="fieldcontain"><a>Drei</a></li>
					</ul>
				</div>

				<div class="ui-block-b">
					<ul data-role="listview" data-filter="true">
						<li data-role="fieldcontain"><a>Eins</a></li>
						<li data-role="fieldcontain"><a>Zwei</a></li>
						<li data-role="fieldcontain"><a>Drei</a></li>
					</ul>
				</div>
			</div>
		</div>

All you need to do is to set the padding of the content div to 0 and add the now missing padding to the first grid container (“ui-block-a”.

And done.