.even and .odd override each other in css

[Tumetsu]

I'm trying to customize listview. Based on gradient theme's css I created this css file:

Root.popup {
    backgroundColor: 0xFFFFFF;
    color: #FFFFFF;
}

ListView {
    paddingLeft: 0;
    paddingRight: 0;
    paddingBottom: 0;
    paddingTop: 0;
    backgroundColor: 0xFFFFFF;

}

ListView #content {
    color: #FFFFFF;
    backgroundColor: #FFFFFF;
    paddingLeft: 0;
    paddingTop: 0;
    paddingBottom: 0;
    paddingRight: 0;
    borderSize:0;
    spacingX: 0;
    spacingY: 0;
    cornerRadius: 0;

}

ListView:disabled {
    borderColor: 0xFFFFFF;
}

.even {
    backgroundColor: #FFF666;
    fontSize: 16;
    fontName: "_sans";
    color: #8ab3cf;
    paddingLeft: 8;
    paddingTop: 8;
    paddingRight: 8;
    paddingBottom: 8;
    borderColor: #ffffff;
    borderSize: 1;
}

.odd {
    backgroundColor: #FFFFFF;
    fontSize: 16;
    fontName: "_sans";
    color: #8ab3cf;
    paddingLeft: 8;
    paddingTop: 8;
    paddingRight: 8;
    paddingBottom: 8;
    borderColor: #8ab3cf;
    borderSize: 1;
}

.even #text, .odd #text {
    color: #4180ab;

}

.even:selected Text, .odd:selected Text, .even:over Text, .odd:over Text {
    color: #000000;
}

//when boxes are not active

//change box to orange when hovering it
.even:over, .odd:over {
    backgroundColor: #f38630;
    borderColor: #f38630;

}

.even:selected, .odd:selected {
    backgroundColor: #f38630;
    borderColor: #f38630;
    color: 0xffffff;
}

ListViewItem #subtext {
    color: 0xffffff;
    fontSize: 11;
}

ListSelector, DateSelector {
    fontSize: 13;
    fontName: "_sans";
    color: 0x000000;
    paddingLeft: 5;
    paddingTop: 2;
    paddingBottom: 2;
    paddingRight: 5;

    backgroundImageScale9: 5,5,15,15;
    backgroundImageRect: 0,0,20,20;

    iconPosition: "right";
    textAlign: "left";
}

ListSelector:over, DateSelector:over {
    color: 0x000000;
    backgroundImageScale9: 5,5,15,15;
    backgroundImageRect: 20,0,20,20;
}

ListSelector:down, DateSelector:down {
    backgroundImageScale9: 5,5,15,15;
    backgroundImageRect: 40,0,20,20;
}

However, only the .odd is recognized and all listitems are stylized in that way, even the even ones. If I swap the order of .odd and .even definitions, the .even defines all the listitems. In short only the latter one remains in effect. Why?

And while we are it, how I define the color of the background of the ListView which shows up if the list has fewer items than there fits? I can only get the default gray to show up and couldn't define the color via css.

[ianharrigan]

Sorry for the late reply... didnt get an email about this... Ill check this out tomorrow and get back to you.

Sorry again for the delay, been out of the loop for a while.

Cheers, Ian

[ianharrigan]

Hi,

Ive just submitted a fix that affected the style cache that it think will fix this. The version is 1.5.7 in haxelib... can you let me know if it fixes it for you?

Cheers, Ian

[ianharrigan]

As for you second question, the component you are looking for is called "container". So this works in the builder:

<?xml version="1.0" encoding="utf-8" ?>
<listview id="theList" width="300" height="100%">
    <style>
        #theList #container {
            backgroundColor: #FF0000;
        }
    </style>
    <array>
        Item 1,
        Item 2,
        Item 3, 
        Item 4,
        Item 5
    </array>
</listview>

This is another failure of good documentation i feel... Something i will (will!) get sorted once im done with my bug hunt!

Cheers, Ian

[ianharrigan]

Ok, i think this should be fixed in version 1.5.11, i think it was related to #161

[ianharrigan]

Im going to close this issue as i cant reproduce it. Im pretty sure its been fixes by various problems with the style cache. Feel free to re-open if im mistaken.

Cheers, Ian