Does anyone know how to remove the default drop shadow from ApplicationControlBar?
I tried this but no luck:
<mx:Style>
global
{
dropShadowEnabled:false;
}
</mx:Style>
dropShadowEnabled can only be set in MXML mode but not in design mode. I don't know why it's not documented feature.
This works for me:
<mx:ApplicationControlBar width="80%" dropShadowEnabled="false">
<mx:Button label="Test"></mx:Button>
</mx:ApplicationControlBar>
At runtime:
applicationcontrolbar.setStyle('dropShadowEnabled',"false");
Related
In some of my containers I want to bind the padding and gap value to a variable so they are consistent throughout my application and I have the following code
<s:VGroup gap="{MyCSSStyle.space}"
paddingLeft="{MyCSSStyle.space}"
paddingRight="{MyCSSStyle.space}"
paddingTop="{MyCSSStyle.space}"
paddingBottom="{MyCSSStyle.space}">
However it is not good if I have to copy the inline styles everywhere, is it possible to bind the values in CSS such that I can achieve like this?
.myStyle {
gap: {MyCSSStyle.space};
paddingLeft: {MyCSSStyle.space};
paddingRight: {MyCSSStyle.space};
paddingTop: {MyCSSStyle.space};
paddingBottom: {MyCSSStyle.space};
}
<s:VGroup styleName="myStyle">
I tried but the complier do not allow me to do binding like that.
Binding of CSS is not possible in flex. Instead you can use actionscript to give css dynamically like following:
MXML:
<s:VGroup id="vgContainer" />
Script:
vgContainer.setStyle("paddingLeft",MyCSSStyle.space);
vgContainer.setStyle("paddingRight",MyCSSStyle.space);
vgContainer.setStyle("paddingTop",MyCSSStyle.space);
vgContainer.setStyle("paddingBottom",MyCSSStyle.space);
Hope, It will help.
I have a PieChart... now that I'm moving to support tablets as well, I need to make the fontSize of the legend larger. However, the following has no effect:
<mx:Legend dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
fontSize="8" fontSize.groupTablets="16"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
/>
I know that the state is correct because the other attributes change.
I've also tried adding a style section:
<fx:Style>
.legend {
fontSize:24;
}
</fx:Style>
<mx:Legend dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
styleName="legend"
/>
No change. Nor does it work if I move the style to Main.css.
Using this gives a warning: CSS type selectors are not supported in components: 'mx.charts.LegendItem':
<fx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
mx|LegendItem {
fontSize:24;
}
</fx:Style>
But if I put the same in Main.css, it does work:
#namespace mx "library://ns.adobe.com/flex/mx";
mx|LegendItem {
fontSize:24;
}
The problem I have with that is that I have to be able to make the font larger when in the tablet state, and not just for all states, or the font will be too large on a phone.
Pseudo-selectors don't appear to work:
mx|LegendItem:groupTablets {
fontSize:24;
}
IDs do not work, in either Main.cc or fx:Style:
#pieLegend {
fontSize:24;
}
<mx:Legend id="pieLegend"
dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
/>
However, even if that approach worked it would have difficulties when the code behind the mxml needs to reference a particular component by id.
I even got frustrated and tried this in the code:
pieLegend.setStyle("fontSize", 24);
Nope. Grrrr.
Any ideas?
Caught the same issue. Here's from the adobe forum, might have to wait for apache flex for a real fix:
The problem is based on a bug that was deferred ( http://bugs.adobe.com/jira/browse/FLEXDMV-1656). There are several workarounds, but the simplest is to set the fontSize on the LegendItem type selector, like this:
<mx:Style>
LegendItem {
fontSize:24;
}
</mx:Style>
Things go weird when i tried position a button in titleContent of ActionBar. Set both the "left" and "horizontalCenter" can't move my button.Code as below:
<s:titleContent>
<s:Button label="HELLO" left="50"/>
</s:titleContent>
How can I position a Button at the middle of this Actionbar??
The docs say that the default layout for the titleContent is HorizontalLayout. So 'left' and 'horizontalCenter' do not apply.
You can use the titleLayout property to use a different layout (BasicLayout) for the title content:
<s:titleLayout>
<s:BasicLayout />
</s:titleLayout>
You can also use css :
s|ActionBar
{
titleAlign: center;
}
I am attempting to style the headers in a flex datagrid and I keep getting the warning:
Type DataGrid in CSS selector 'DataGrid' must be qualified with a namespace
What does this mean? I have gone through a bunch of tutorials and none of them have worked. It seems like changing a the colors in a datagrid should be relatively simple.
Here is a code sample:
<mx:Style>
.headerCustomStyle
{
fontWeight: "bold";
textAlign: "center";
color: #0000FF;
}
DataGrid {
alternating-item-colors: #F4FBFF, #FFFFFF;
}
</mx:Style>
<mx:DataGrid draggableColumns="true" width="100%" id="topTracks" headerStyleName="headerCustomStyle" dataProvider="{_trackData.track}" >
<mx:columns>
<mx:DataGridColumn id="artistName" dataField="artist.name" headerText="Artist" width="250" />
<mx:DataGridColumn id="trackName" dataField="name" headerText="Track" width="250"/>
</mx:columns>
</mx:DataGrid>
If you're using Flex 4, you need to define namespaces like this:
#namespace mx "library://ns.adobe.com/flex/halo";
#namespace s "library://ns.adobe.com/flex/spark";
#namespace tlf "library://ns.adobe.com/flashx/textLayout";
/* Halo DataGrid */
mx|DataGrid
{
...
}
/* Spark Button */
s|Button
{
...
}
They might be referring to that if you're using a new version of Flex/Flash Builder. Not sure if Flex 3 requires namespaces though.
Here's Adobe's doc on CSS Namespace Support
If you're using Flex 4, you normally DO NOT use CSS at all.
You think I'm telling tales?
Well, read this:
http://www.adobe.com/content/dotcom/en/devnet/flex/articles/migrating-flex-apps-part2.html
Port your Flex 4 applications to CSS-free code and you won't have any of these problems.
I'm not sure why its telling you that you need a namespace, but in your CSS, DataGrid is a type.
So try and give it the fully qualified namespace for DataGrid (mx.controls.DataGrid)
For the life of me, I can't get stylesheets to work... Something having to do with the namespaces and the way I am setting them. So here is my code:
<mx:Style>
#namespace mx "library://ns.adobe.com/flex/halo";
mx|DataGrid {
headerColors: #0066cc, #00ffff;
borderThickness: 7;
borderColor: #00ff33;
}
</mx:Style>
<mx:DataGrid
styleName="myGridStyle"
wordWrap="true"
id="people"
width="500"
height="350"
dataProvider="{dataArr}"
editable = "false"
itemClick="itemClickEvent(event);" sortableColumns="true"
rollOverColor="0xffffff"
>
What am I doing wrong here? I've tried it many different ways and it seems to work for others in tutorials I have done.
The namespace has recently changed from:
#namespace mx "library://ns.adobe.com/flex/halo";
to
#namespace mx "library://ns.adobe.com/flex/mx";
mx instead of halo.
Let me know if that fixes it.
Lance
try to remove "styleName="myGridStyle"" in your datagrid declaration