The code below produces two groups with colored backgrounds and a margin between them. Ive tried the obvious css fixes (margin-top/bottom etc) but it seems it doesnt do any good. Does anyone know how i can do this?
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Group id="topBar" width="100%" height="10%" bottom="0">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="black" /></s:fill>
</s:Rect>
</s:Group>
<s:Group id="contentBar" width="100%" height="90%" top="0">
<s:Rect width="100%" height="100%">
<s:fill><s:SolidColor color="red" /></s:fill>
</s:Rect>
</s:Group>
</s:VGroup>
Are you saying you want to get rid of the gap between children elements of the VGroup?
You can set gap=0 in the group, as in:
<s:VGroup gap="0" />
Hope that helps.
Related
I have the following code:
<s:BorderContainer id="myBorder"
width="78" height="78"
horizontalCenter="0"
>
<s:Scroller id="myScroller" horizontalScrollPolicy="off" >
<s:TileGroup id="thingyList"
height="78"
focusEnabled="true"
horizontalGap="4"
verticalGap="4"
mouseOver="thingyList_mouseOverHandler(event)"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
requestedColumnCount="3"
requestedRowCount="3"
maxHeight="78"
maxWidth="78"
bottom="row1:3"
verticalScrollPosition="70"
horizontalAlign="center"
verticalAlign="middle"
clipAndEnableScrolling="true"
/>
</s:Scroller>
</s:BorderContainer>
The problem I'm having is that as items are added to the tileGroup, the vertical display of the tile group overflows its' bounds, thus displaying +- 3 1/2 rows of data.!
It's really driving me crazy! ideas anyone?
thanks!,
mce
Scroller are tricky in the Spark architecture.
Give the Scroller an explicit height and width; set the TileGroup to height and width of 100%.
<s:Scroller id="myScroller" horizontalScrollPolicy="off" height="78" width="78" >
<s:TileGroup id="thingyList"
height="100%"
focusEnabled="true"
horizontalGap="4"
verticalGap="4"
mouseOver="thingyList_mouseOverHandler(event)"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
requestedColumnCount="3"
requestedRowCount="3"
maxHeight="78"
maxWidth="78"
bottom="row1:3"
verticalScrollPosition="70"
horizontalAlign="center"
verticalAlign="middle"
clipAndEnableScrolling="true"
width="100%"
/>
</s:Scroller>
I am using spark DropDownLists and I don't want to see any horizontal scrollbars in the dropdown. I'm OK with the dropdown being wider than the anchor, so I have a custom skin that sets popUpWidthMatchesAnchorWidth to false. But I don't want the dropdown to ever be smaller than the anchor. This is my dilemma.
I came up with a solution that sometimes works, but there is something wrong with it. My DropDownList skin is as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" minHeight="25">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.DropDownList")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
// anchor width is the min width of the dropdown
if (dropDown && openButton && popUp && dropDown.getExplicitOrMeasuredWidth() < openButton.getExplicitOrMeasuredWidth())
popUp.popUpWidthMatchesAnchorWidth = true;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" stateGroups="closed" />
<s:State name="open" />
<s:State name="disabled" stateGroups="closed" />
</s:states>
<s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
popUpPosition="below" popUpWidthMatchesAnchorWidth="false">
<s:Group id="dropDown" maxHeight="134" minHeight="22" >
<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"
angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
<s:Rect id="border" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="1"/>
</s:stroke>
</s:Rect>
<s:Rect id="background" left="1" right="1" top="1" bottom="1" >
<s:fill>
<s:SolidColor color="#222222"/>
</s:fill>
</s:Rect>
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
<s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
</s:PopUpAnchor>
<s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" alpha.disabled="0.5"
skinClass.closed="assets.skins.dropDownList.dropDownListNormalButtonSkin"
skinClass.open="assets.skins.dropDownList.dropDownListOpenButtonSkin"/>
<s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
mouseEnabled="false" mouseChildren="false"
left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
</s:SparkSkin>
This works as expected when the contents of the dropdown are either wider than the anchor or smaller than about 100px, but if I explicitly set the width in the instance of the DropDownList to be something like 200px and the contents of the dropdown are around 150px wide, the dropdown is smaller than the anchor.
Basically, it looks like openButton.getExplicitOrMeasuredWidth() returns about 100, regardless of what I set the DropDownList's width to be.
How can I change this so that I can have multiple DropDownLists with different widths, but always making sure that the dropdown's width is either greater than or equal to the anchor's width?
You Said:
"but if I explicitly set the width in the instance of the DropDownList to be something like 200px and the contents of the dropdown are around 150px wide, the dropdown is smaller than the anchor."
So if you explicitly set the width, then this.width is always reliable. Simply replace the button.getExplicitOrMeasuredWidth() with this.width, problem solved.
if (dropDown && openButton && popUp && dropDown.getExplicitOrMeasuredWidth() < this.width)
popUp.popUpWidthMatchesAnchorWidth = true;
I suggest you using openButton.width instead of openButton.getExplicitOrMeasuredWidth().
I have a canvas lets say the size of it on the screen is 500x500. But I want the actual canvas size to be 1000x500 making the other half scrollable. How can I make a blank canvas with that specification?
Thank you
<s:Group width="500" height="500">
<s:Scroller left="0" right="0" top="0" bottom="0">
<s:Group width="1000" height="500" />
</s:Scroller>
</s:Group>
I am having some problems with clipAndEnableScrolling, it works fine for VGroup when the parent has fixed height, but if the parent doesn't have a fixed height then it doesn't work and the content spills over. e.g:
<s:TitleWindow width="500" height="500">
<s:VGroup width="100%">
<s:Group width="100%">
<!-- The content in here changes height based on the state, I won't complicate this example with the details -->
</s:Group>
<s:Group width="100%" clipAndEnableScrolling="true">
<s:Scroller height="100%" width="100%">
<s:DataGroup dataProvider="{someData}" width="100%">
<s:layout>
<s:VerticalLayout gap="1"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
</s:VGroup>
</s:TitleWindow>
This is a contrived example, but the point is that I don't know the hight of the first group ahead of time so can't set the height of the second group, also the component in reality is quite a lot more complex that the contrived example above so I don't want to have to perform any kind of gymnastics to calculate the heights of everything above the second Group.
Can anyone tell me how to get a scrollbar on the second group?
Cheers,
Chris
Can you try setting height to 100% upon all the groups, something like this
<s:TitleWindow width="500" height="500">
<s:VGroup width="100%" height="100%">
<s:Group width="100%" height="100%">
<!-- The content in here changes height based on the state, I won't complicate this example with the details -->
</s:Group>
<s:Group width="100%" height="100%" clipAndEnableScrolling="true">
<s:Scroller height="100%" width="100%">
<s:DataGroup dataProvider="{someData}" width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="1"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
</s:VGroup>
</s:TitleWindow>
Put your group inside the scroller.
<s:Scroller height="100%" width="100%">
<s:DataGroup dataProvider="{someData}" width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="1"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Group>
Is there a way to get the content of a component inside a scroller to be at 100% height.
here is a simple example:
<s:Scroller width="100%" height="100%">
<s:viewport>
<s:Group height="100%">
<s:Rect width="10" height="500">
<s:fill>
<s:SolidColor color="0xFF0000"/>
</s:fill>
</s:Rect>
<s:Rect width="10" x="10" height="100%">
<s:fill>
<s:SolidColor color="0x00FF00"/>
</s:fill>
</s:Rect>
<s:Rect width="10" x="20" height="100">
<s:fill>
<s:SolidColor color="0x0000FF"/>
</s:fill>
</s:Rect>
</s:Group>
</s:viewport>
</s:Scroller>
If you run this code and scroll down a bit, this is what you get:
As you can see, the green bar (set at 100% height) is just using the height of the viewport, not that of it's parent group, that is stretched by the red one to be 500px high.
Is there a way to fix that?
Here's a workaround: Put the group inside another group, and then it works as expected.