Problem with HaxeUI CSS

[Tumetsu]

I'm trying to customize the look of a ListView in HaxeUI. However, since I can't find any list of supported css attributes, I'm having some problems. Now I have managed to customize the list mostly how I want except for coloring of the background of the ListView which will show when there isn't enough ListItems to fill the list. Below is and image of my situation:

I want to change that gray area on the left to white. I have no idea how to do that. I tried different attributes, such as addind backgroundColor to the ListView with no avail. Interestingly if I added some padding to the ListView, I get this result:

Notice how the right side of the ListView area is now white with paddingRight: 15; This leads me to think that there is some kind of element inside the ListView which I should manipulate to change the gray color. What is it? I tried to go through HaxeUI's gradient theme to find any css-attributes for that area since in the Layout Builder the Gradient theme paints the gray area to white. However, I didn't find anything which would specify the area from default theme's gray to white.

Finally here is my CSS-definitions for ListView:

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 #nocontent {

backgroundColor: #FFFFFF;

}

ListView:disabled {

borderColor: 0xFFFFFF;

}

.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

.even, .odd {

backgroundColor: #FFFFFF;

fontSize: 16;

fontName: "_sans";

color: #8ab3cf;

paddingLeft: 8;

paddingTop: 8;

paddingRight: 8;

paddingBottom: 8;

borderColor: #8ab3cf;

borderSize: 1;

}

//change box to orange when hovering it

.even:over, .odd:over {

backgroundColor: #f38630;

}

.even:selected, .odd:selected {

backgroundColor: #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;

}

Thank you very much of any help. I have banged my head to wall several hours now because of this :(

[Tumetsu]

I finally managed to solve problem. By going to the HaxeUI library to the toolkit/style/DefaultStyles.hx I found a style definitions for "Container". Apparently this is the

element which was gray on pictures above. So adding the following css-rules solved the problem:

 

Container {

backgroundColor: 0xFFFFFF;

}

[Ian Harrigan]

Sorry for the late reply, it was my birthday weekend so wasnt about much! Anyways, glad you managed to fix it...

Cheers,
Ian