Search code examples
javascriptcsscordovadynamic-list

CSS doesn't effect dynamically created list on Phonegap

similar to my question is this one and this one

however, still haven't sorted any solution.. i have in the <body> an unordered list <ul> each element of which is added after performing a query to a database..So according to the result, i have the corresponding <li> tags created..

Ther problem is, that although i have some css to seperate <li> to "odd" and "even" so that i can apply some different styles, and i have confirmed, that the "odd" and even" attibute has passed as an attribute (classname) to <li> still the corresponding css rules, do not apply

here is some of my code.. first the html part

<div id="sqldiv">
   <ul class="test" id="attempt">
    </ul>
</div>

and the javascript part..

        for (var i=0; i<len; i++){
        var somevariable =  results.rows.item(i).dbvariable;
                if (i%2==0)
                lt='Even';
                else
                lt='Odd';
                var newLI = document.createElement("LI"); 
                newLI.className = lt;
                var htmlcontainer = ("<div>my text :" + my variables + "</div><div>my text :</div><div>" my variables + "</div>");
                newLI.innerHTML = htmlcontainer ;
                var gl = document.getElementById("attempt"); 
                gl.appendChild(newLI);
            }

and the css

li {
background: #8258FA;
list-style-type:none;
list-style-image:none;
margin: 5px 5px;
border-radius: 15px;
}
li.odd  {
border-bottom :1px dotted #ccc;
list-style-type:none;
list-style-image:none;
margin: 5px 5px;
background: #000000;
}

the li styling does apply, but the styling by class (li.odd) doesn't

Solution

  • after spending last 24 hours searching..i tried sth that didn't cross my mind..!!!!

    in javascript i name class Even and Odd..and on css i have .even and .odd rules.. and this worked great on another project..!!!

    but, for some reason, in this case there seemed to be a "case sensitive" issue.. since i changed css rule to .Even and .Odd, they were applied successfully..

    before reaching this, i had also tried assigning dynamic css rules using jquery..and after some attempts, i ended up to the case sensitive..