CSS doesn't effect dynamically created list on Phonegap

StackOverflow https://stackoverflow.com/questions/12810871

Question

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

Was it helpful?

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..

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top