flex - CollapsibleAccordion label not visible problem when migrated from Flex3 to Flex4 -

the collapsibleaccordion. have 2 canvas inside collapsibleaccordion, , works fine, problem unable see labels when migrated code flex4 flex3.

the code problem 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_widget_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 need anymore clarification or have thing ask, let me know

thanks in advance zeeshan

i guess using embedded font accordion header.if so,include in css.

mx|accordionheader {     textfieldclass: classreference("mx.core.uiftetextfield"); } 

refer link more details

spark components use fte , tlf classes(both introduced in fp 10) text rendering.where mx components use textfield text rendering.if not use embedded fonts in application,this not create conflicts mx components.but if use embedded fonts have embed fonts twice,for work mx components-embed embedascff="false"(for mx) , embedascff="true"(for spark ).but embedding same font twice not advisable since adds total size of application swf(but if remember correctly,even did not work me).so is,for mx components explicitly tell class fte , tlf package used text rendering.for more details on class use component,refer above link.