Hi,
I've been trying last 5 hours to remove space in a collapsible listview with no success.
I have a listview, the content is loaded with ajax.
The code loaded from the ajax call is the <li> element and the <ul> listview (with its <li> elements) inside the <li>. I use append() to add all this to the parent listview.
Everything is inside a <span> and after loading the code from ajax I use .trigger("create") on the span to obtain the graphic elements.
The first element of the list on top is fine but below there is a blank space.
When I expand the collapsible the blank space is also between the last element of the collapsible and the next <li> of the parent listview.
When the mouse is over the second element of the parent listview, the <li> element is correctly highlighted and the blank space above not.
I'm using this in a phonegap app. The code is splitted in 3 files: html, js and php. I try to put here some code.
In the HTML file I have:
- <span id="send_div_listview_span">
- <ul data-role='listview' id='myfeedlist'></ul>
- </span>
In the JS file I have:
- $("#myfeedlist").append(response.feedlist);
- $("#send_div_listview_span").trigger("create");
In the PHP file I have:
- $result['feedlist'] .= "<li data-role='collapsible' data-iconpos='right' data-inset='false' class='sendlistviewli' id='".$record['id']."'><h2>".$record['title']."</h2><ul data-role='listview' ><li id='option1'><a href='#'>Option1</a></li><li id='option2'><a href='#'>Option2</a></li><li id='option3'><a href='#'>Option3</a></li></ul></li>";
After so many tries I removed any css I had in the <head> of the html page to fix this.
I also noticed that if I try to refresh the lisview in JS file after the .append() the space become even more!!
Any idea?
I really don't know what I could try.
Thank you!