Clever Geek Handbook

Jquery mobile listview creating space between each item

I am unable to remove the small space between each list item. The list is much longer than what I am posting here, but I don't think it has anything to do with this issue.

I have tried to fix this by reformatting the list several times to no avail. I am also linking to jquery mobile site and cannot find an answer.

My code:

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1," />
<!-- Website Title -->
<title>Test
</title>

<!-- Jquery Mobile Theme / Jquery Scripts -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head> 

<!-- Color of Background -->
<body style="background:#6e6e6e">

<!-- Start of Name page -->
<div data-role="page" id="name">

<div data-role="header" data-theme="b">
    <h1>Test</h1>
</div><!-- /header -->

<div data-role="content">   
<p>
  <ul data-role="listview" data-filter="true" data-filter-placeholder="Test..." data-inset="true" data-autodividers="true">
    <li><a href="#link2">Hello</a></li>
    <li><a href="#link3">There</a></li>
    <li><a href="#link4">World</a></li>
    <li><a href="#link5">World2</a></li>
</p>
</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-theme="b">
    <h4>© 2013 ChurchySearch</h4>
</div><!-- /footer -->
</div><!-- /Name page -->

It continues to look like this: http://www.jesseandamanda.com/screenshot.png

Suggestions?

+3


source to share


1 answer


This happens when you copy the code from the jQuery Mobile demo page. You probably have the same problem with your list. Try removing invisible characters in front of each <li>

one to fix this. See if multiple lines look like <li>test</li><li>test</li>

.



+10


source






More articles:


All Articles