CollapsibleAccordion label not visible problem when migrated from Flex3 to Flex4

The CollapsibleAccordion. I have two canvas inside the CollapsibleAccordion, and everything works fine, but the only problem is that i am unable to see the labels when I migrated my code to Flex4 from Flex3.

The code for this problem is below:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                
            xmlns:cal="cal.*"
            layout="absolute"
            addedToStage="stage_init()"
applicationComplete="init()"                            
        xmlns:geometry="com.degrafa.geometry.*"
        xmlns:degrafa="com.degrafa.*"
        xmlns:paint="com.degrafa.paint.*"
        xmlns:containers="flexlib.containers.*"
        xmlns:flexlib_controls="flexlib.controls.*"
        xmlns:mdi_containers="flexlib.mdi.containers.*"
        xmlns:auto="com.hillelcoren.components.*" 
        xmlns:local="*" backgroundColor="#f7fafe" backgroundGradientColors="[#f7fafe, #6caaeb]"
        xmlns:components="CollapsibleAccordion.*"
        xmlns:notifications="c7.views.components.notifications.*"
        xmlns:dbview="c7.views.apps.dashboard.*"
        modalTransparency="0.8" preloader="c7.views.components.Pre"
        modalTransparencyColor="0x000000" verticalScrollPolicy="auto"
        backgroundSize="100%"               
        xmlns:components1="c7.views.components.*" 
        xmlns:notification="c7.views.components.notification.*" 
        xmlns:news="c7.views.components.news.*">    
    <mdi_containers:MDICanvas id="mdic" horizontalScrollPolicy="off" verticalScrollPolicy="off"
        visible="{!GlobalModel.getInstance().dashboard_mode}"
         minWidth="{top_bar.width}"
        width="100%" height="100%" top="{top_bar.height}" backgroundAlpha="0">                              
       <mx:Canvas id="cvs_widge开发者_如何学Pythont_bar" right="0" top="0" height="100%">
            <components:CollapsibleAccordion id="collapsibleAccordion1" height="100%" top="0" right="0"
                orientation="left" barSize="30" currentWidth="30" openSize="150"
                drawerButtonStyle="drawerButton" closeButtonStyle="drawerCloseRight" accordianStyle="drawerAccordion">
                <mx:Canvas width="100%" top="0" right="0" height="100%" label="Widget Bar">

                </mx:Canvas>
                <mx:Canvas width="100%" height="100%" label="Feedback" icon="{IconUtility.getClass(cvs_comment,'assets/cloud_main/images/article-48x48.png')}"
                    id="cvs_comment" top="0" right="0">

                </mx:Canvas>
            </components:CollapsibleAccordion>
        </mx:Canvas>    

If you need anymore clarification or have some thing to ask, let me know

Thanks in advance Zeeshan

---

I guess you are using an embedded font for your accordion header.If so,include this in your CSS.

mx|AccordionHeader
{
    textFieldClass: ClassReference("mx.core.UIFTETextField");
}

Refer this link for more details

Spark components use FTE and TLF classes(both introduced in FP 10) for text rendering.Where as mx components use TextField for text rendering.If we do not use any embedded fonts in your application,this will not create any conflicts with mx components.But if we use embedded fonts we will have to embed the fonts twice,for it to work with mx components-embed with embedAsCFF="false"(for mx) and with embedAsCFF="true"(for spark ).But embedding the same font twice is not advisable since it adds to the total size of application swf(But if I remember correctly,even this did not work for me).So what we do is,for mx components we explicitly tell which class from the FTE and TLF package to be used for text rendering.For more details on which class to use for which component,refer the above link.