CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
darsh
darsh

Reputation: 751

JQuery Mobile list not getting correct style

I have an unordered list in my html file

<ul data-role="listview" id="mylist" data-inset="true" data-theme="c" data-dividertheme="a" >

</ul>

The list elements are populated from the database in the js file 

$('#mylist').append('<li><a href="#"> <h1 class="myHeader">'+item.name+'</h1><p class="myParagraph">'+item.state+'<br>'+item.zipcode+'</p></a></li>');

This is what I do in the style sheet

.myHeader.ui-li-heading {
    color: #000000;
    font-family: Helvetica;
}

.myParagraph.ui-li-desc {
    color: #333;
    overflow: show;
    text-overflow: clip;
    white-space: normal;
    height: 28px;
    margin-bottom: 0px;
}

The problem is that the list is not getting the correct style. Am I doing it completely wrong? What could be a solution?

Upvotes: 1

Views: 123

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You were missing:

$('#mylist').listview('refresh');

Here's an example made from your code: http://jsfiddle.net/Gajotres/Z6wzQ/

More information can be found here: http://jquerymobile.com/test/docs/lists/docs-lists.html. Look at a heading Updating lists.

Upvotes: 2

Related Questions