RE: [flexcoders] mx:Panel and disabling CSS Inheritance.

[Matt Horn]

Sorry for the reply to my own message, but I tried out some stuff; here's a quick and dirty way to prevent style inheritance with a custom component (called SpecialPanel in this example).

 

The regular panel picks up the styles from the CSS class selector in the main application file (these are the default colors). The special panel (in this case, the outer panel) picks up its header colors from the inline style declaration on the custom MXML component. This style is not inherited by the inner panels.

 

----------------MainApp.mxml-----------------

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:local="*" >

 <mx:Style>
  Panel {
   headerColors:#E1E5EB, #F4F5F7;  
  }
 </mx:Style>
 <local:SpecialPanel>
  <mx:Button id="b1" label="Click Me"/>
  <mx:Panel>
   <mx:Button id="b2" label="Click Me Too"/>   
  </mx:Panel>
 </local:SpecialPanel>

</mx:Application>

------------SpecialPanel.mxml---------------

<?xml version="1.0"?>
<mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml" headerColors="[0xCC66CC,0x3366CC]">

</mx:Panel>

 

HTH,

 

matt horn

 

---

From: Matt Horn [mailto:[EMAIL PROTECTED]
Sent: Friday, March 11, 2005 1:27 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] mx:Panel and disabling CSS Inheritance.

I don't know of any way to prevent an inheriting style from being inherited except to write a custom component. However, you can use CSS to your advantage by having a default style and your custom style. Apply the custom style to the outer panel and then the default style to the inner panels (which will then propagate to the inner panels' children).

 

THe following example illustrates this:

 

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
 
 <mx:Style>
  outerStyle {
   headerColors:#CC66CC,#3366CC;
  }
  innerStyle {
   headerColors:#E1E5EB, #F4F5F7;
  }
 </mx:Style>
 
 <mx:Script><![CDATA[

 

 ]]></mx:Script>
 
 <mx:Panel className="outerStyle">
  <mx:Button id="b1" label="Button 1" />  
  <mx:Panel className="innerStyle">
   <mx:Button id="b2" label="Button 2" />  
   <mx:Panel>
    <mx:Button id="b3" label="Button 3" />  
   </mx:Panel>
  </mx:Panel>
 </mx:Panel>
</mx:Application>

 

HTH,

 

matt horn

---

From: Scott Barnes [mailto:[EMAIL PROTECTED]
Sent: Friday, March 11, 2005 12:19 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] mx:Panel and disabling CSS Inheritance.

Hi All,

I have an mx:Panel, with a simple headerColors=[col1,col2] approach,
easy enough.

BUT...

How do i prevent its children Panels/Controls from also inheriting
that style? At the moment the only way i can think of is to do a long
winded custom ActionScript which manipulates the instance of the
mx:Panel itself - but there has to be a better way no?

--
Regards,
Scott Barnes
http://www.mossyblog.com
http://www.flexcoder.com