I recently had the following problem:
I have had this completely stylized application that I had been working on for quite some time. I went to add a simple date chooser control to the application. And this is what I got…
The solution was not obvious. (Well at least not to an idiot like me.)
Now as you can see this wasn’t going to work. At first, I assumed that my style for the control was messed up; however it was ok .
[DATE CHOOSER STYLE DEFINITION]
DateChooser {
headerColors: #fab000, #ff6600;
todayColor: #666666;
rollOverColor: #ffff00;
selectionColor: #ff9900;
color: #000000;
backgroundColor: #ffffff;
}
I messed around with the thing for a about a half an hour. In that time I was able to determine that the error occurred whenever I would embed the date control inside of any container that was at any level inside of an accordion container. If the datechooser is not contained inside of an accordion, or any container that is at some level inside of an accordion, then the datechooser renders correctly. What I wondered was the problem. At first, I thought maybe this was some Flex bug, some incompatibility problem with the accordion and the datechooser. I couldn’t figure out why it only occurred with the accordion container. After all it is just another container. Then I decided to look at something that makes the accordion container different… something that I did to make it different.
[ACCORDION STYLE DEFINITION]
Accordion {
headerHeight: 20;
dropShadowEnabled: true;
shadowDistance: 3;
backgroundAlpha: 1;
highlightAlphas: 0.36, 0.02;
fillColors: #ff6633, #ff0033, #ffcc00, #ff9900;
selectedFillColors: #fab000, #ff3300;
themeColor: #ff6600;
backgroundColor: #fab000;
borderColor: #ff9900;
textIndent: 18;
openDuration: 441;
}
At first I didn’t notice what was causing the problem I wasn’t even positive that the style was causeing the problem. I started by commenting out the entire style definition for the accordion. That worked… the datechooser rendered correctly. Of course, that wasn’t going to work. I then went and commented out different sections in the style until I figured out what was causing the problem……
...
textIndent: 18;
...
Apparently, the textIndent was being picked up by the cells in the datechooser which was pushing the digits over by 18 thus moving them to where they could not be seen. The fix was to add the following line to the style for the datechooser.
...
textIndent: 0;
...
There it was in the end a rather simple solution.
