Overlapping inside listview li

Question

I generate list items inside a listview dynamically (onclick). You can view my code here: jsfiddle

Since I have to accompany the jsfiddle link with code, here goes:

HTML

<div data-role="fieldcontain">Select option:
    <br>
    <select name="prodselect" id="prodselect">
        <option data-foo="xxx">first</option>
        <option data-foo="yyy" selected="selected">Second</option>
    </select>
    <input type="button" name="appeprod" id="appeprod" value="Add option" data-icon="add" data-inline="true" />
</div>
<ul name="listaproduse" id="listaproduse" data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
    <li data-role="list-divider">
         <h3 class="ui-li-heading">Selected options</h3>
 <span class="ui-li-count">5</span> 
    </li>
    <li id="produsele" name="produsele"></li>
</ul>

and jscript

$('#appeprod').click(function() {
    var option = $('#prodselect').val();
    var box = document.getElementById('prodselect');
    var option2 = box.options[box.selectedIndex].text;
    $('#listaproduse').append('<li><h3>'+option2+'<h3><p>'+option+'</p><p>Some comment:</p></li>');
    $('#listaproduse').listview("refresh");
});

My problem is (as you can see it in jsfiddle) the H3 tag content overlaps the bellow paragraph.

I updated the jsfiddle , added below the dynamic listview, a static one with the same content that I desire to generate in the dynamic one. The static one looks fine while the dynamic one is overlapping. What can I do? How can I avoid this?

Answer 1

You didn't close the <h3> properly in your JS code. Should be: <h3>'+option2+'</h3>

Answer 2

You need to add this to the style. I looked at the styling added to that element and found that the margin-top was -0.5em

CSS

.ui-li-desc
{
 margin-top: 0;
}