Alert dialog not showing the text in flex 4

actionscript-3apache-flexflashflash-builderflex4

I am using Flex 4 and running into some problems displaying a simple alert box. The alert box shows up, but the text seems to be the same color as the background. I know the text is there because if I mouse over in the alert box window to roughly where the text would be, I can see the cursor change. And when I double click and copy-paste into notepad, I can see the message. But the message, the button text, the message box title don't show up.

The relevant code in my project is as follows

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s="library://ns.adobe.com/flex/spark" layout="absolute"
initialize="{initialiseFlex()}"  backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]"
xmlns:ns2="keyboard.*" xmlns:ns1="com.adobe.flex.extras.controls.*" 
minHeight="864"  minWidth="1024" verticalScrollPolicy="off" width="1024">

<mx:Script>
            <![CDATA[
                    import mx.binding.utils.BindingUtils;
                    import flash.net.sendToURL;
                    import mx.utils.URLUtil;
                    import mx.managers.IBrowserManager;
                    import mx.managers.BrowserManager;
                    import mx.controls.Alert;

            ]]>
    </mx:Script> 

    <mx:Style>
            Alert {
                    titleStyleName: "alertTitle";
                    message-style-name: "alertMessage";
                    buttonStyleName: "alertButton";
                    background-color: #ffffff;
                    header-colors : #F4800E, #F4800E;
                    border-color : #F4800E;
                    corner-radius :6;
                    font-anti-alias-type:advanced;
            }
            .alertMessage {
                    fontSize: 20;
                    color: black;

            }
    </mx:Style>

<mx:Button click="Alert.show('From inside mxml')" 
enabled="false" x="580" y="440" label="Sign Out" id="btnSignOut" fontSize="24" 
labelPlacement="right" color="#F4800E" />

I have tried various things such as removing all the style information (the alert box shows up as bluish box, but again the text is the same color and hence invisible). I have removed all the backgroundgradientcolos and alphas from the application tag. etc. etc. I have changed the ".alertMessage" to "alertMessage" in the style part. But no matter what, the message text, title and button text in the alert box is always invisible. I know the text is there, as I said, because I can mouseover the alert box and see the cursor change, and then double click and copy/paste the text.

I have a suspicion that this is related to another problem I am having in the same project described here Autocomplete in Flex 4.0 not displaying items in dropdown list

Both of these controls seem to have text that is invisible, as if the text color is set the same as the background. I have tried to look for other style files, theme files or something in the project that would be responsible for setting these colors. But couldn't find any. The project is relatively simple with one mxml, 3 ".as" files, one of which has validation logic and the other one has a wait anmiation. The third one has business logic code, but nothing to do with colors or themes. The other controls in the project – text boxes, buttons, datagridsl, panels all work fine. Its the autocomplete box and the alert box that seem to not want to display text that is there.

Any ideas or hints of what might be the cause of the problem?

Best Answer

I think the background and the text color are white for your Alert.

try

Alert 
{

       color: #000000;

       titleStyleName: "alertTitle";
       message-style-name: "alertMessage";
       buttonStyleName: "alertButton";
       background-color: #ffffff;
       header-colors : #F4800E, #F4800E;
       border-color : #F4800E;
       corner-radius :6;
       font-anti-alias-type:advanced;
}
Related Topic