Here's my problem - I have some code like this:
<mx:Canvas width="300" height="300">
<mx:Button x="800" />
</mx:Canvas>
So the problem is that the Button inside the canvas has an x property way in excess of the Canvas's width - since it's a child of the Canvas, the Canvas masks it and creates some scrollbars for me to scroll over to the button.
What I'd like is to display the button - 800 pixels to the left of the Canvas without the scrollbars while still leaving the button as a child of the Canvas. How do I do that?
I figured it out - apparently the Container has a property called clipContent - here's the description from Adobe:
Whether to apply a clip mask if the positions and/or sizes of this container's children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.
If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container's children extend outside the border of the container. For additional control over the appearance of scrollbars, see horizontalScrollPolicy and verticalScrollPolicy.
The default value is true.
So basically - to show the button outside of the bounds of the container I need to do the following:
<mx:Canvas width="300" height="300" clipContent="false" >
<mx:Button x="800" />
</mx:Canvas>
That was easier than I thought it was going to be. :)
Here's the official doc...
You should be able to use the includeInLayout property also, which would allow you to apply it to each child component independently.
Related
I have a s:TileGroup as follows:
<s:TileGroup id="myTileGroup"
clipAndEnableScrolling="true" focusEnabled="true"
horizontalGap="4"
paddingBottom="12" paddingLeft="12" paddingRight="2" paddingTop="12"
requestedColumnCount="3" requestedRowCount="3" verticalGap="4"
horizontalScrollPosition="12"
/>
...resulting in a 3x3 grid TileGroup.
As items are added to the TileGroup it "overflows" its' bounds, items are displayed below, and when scrolled above, the 3x3 grid.
Is there a way to "mask" or otherwise hide these items?
I looking at the properties of TileGroup, I've tried to emplement the "verticalScrollPosition" and "bottom" properties - these don't do it.
Setting the "height" property effectively creates a bottom limit for the group, but when scrolled items are still displayed above the "padding" area.
Ideas anyone?
thanks,
Mark
If you want to clip your content, you need to set explicit width/height (or use absolutes; left, right, top, bottom), or wrap it around a Scroller component.
... well, I ended up resizing my surrounding borderContainer and it now effectively limits the TileGroup's items...
a .fla is 500 x 300. Inside, content moves OUT of the 500 x 300 stage so that it appears like it hides or moves off of the screen.
.fla complied... loaded into Flex via SWFLoader:
<mx:Conainer width="500" height="300">
<mx:SWFLoader width="100%" height="100%" />
</mx:Conainer>
Loaded .swf file shows outside of the 500 x 300 Container in Flex.
How can i get it so that only what is INSIDE of the Container is visible?
Ok, i figured it out.
<mx:Canvas id="swfHolder" mask="{maskCanvas}">
<mx:SWFLoader id="swffer" scaleContent="true" />
</mx:Canvas>
<mx:Canvas id="maskCanvas" backgroundColor="#000000"/>
The trick is to use the "mask" property. Note the object doing the "masking" must have a backgroundColor property set. I found this article helpful: link text
please use scaleContent="true" in SWFLoader tag.
<mx:Conainer width="500" height="300" clipContent="true">
<mx:SWFLoader width="100%" height="100%" />
</mx:Conainer>
Use "clipContent" property
Flex help for Canvas:
clipContent:Boolean [read-write]
Whether to apply a clip mask if the positions and/or sizes of this container's children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.
If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container's children extend outside the border of the container. For additional control over the appearance of scrollbars, see horizontalScrollPolicy and verticalScrollPolicy.
If the size of canvas set in the MXML markup, some part of the components that go beyond the boundaries of canvas not displayed. If the canvas size to change dynamically(canvas.width, canvas.height), canvas boundaries are virtually absent.
How to dynamically change the size of the Canvas?
Do you really need a canvas? If you need sizes changed dinamically try to put your content inside a VBox for example ( of any relative container ) and use minWidth, minHeight to set it up, otherwise, Canvas is a component so is whould have width and height properties.
e.g.
<Canvas id="myCanvas" width="400" height="300">
<!-- content here -- >
</Canvas>
override the canvas's updateDisplayList function.
override protected function updateDisplayList(w:Number,h:Number):void {
super.updateDisplayList(w,h);
this.setActualSize((child1.width+child2.width), Math.max(child1.height,child2.height));
}
Alternatives are to override the canvas measuredHeight/measuredWidth getters. Or override the "measure" function.
If scrolling is what you want, you have horizontalSCrollPolicy/verticalScrollPolicy properties of the canvas.
Lots of different solutions depending on your exact problem.
I have the following code in my flex project.
<mx:Canvas id="scroller" styleName="myCanvas" width="635" horizontalScrollPolicy="off" y="60" height="370" >
<mx:Canvas id="thumbContent" width="635" verticalScrollPolicy="off"
horizontalScrollPolicy="off" y="0" backgroundColor="#00ff00"
backgroundAlpha="0" height="370"/>
</mx:Canvas>
</mx:Canvas>
I want to dynamically add different items to thumbContent canvas and use scroller canvas to scroll. I see than the height of thumbContent bigger than 7977 it truncate from scrolling.
So - I see the scroller canvas with empty space on top. Then I scroll to bottom - I see the content of thumbContent and at bottom scrolling I see empty space too.
It looks like thumbContent is under hidden mask, is this correct?
Looks like you want thumbContent to expand dynamically as you add content. In this case, you need to remove the height attribute from thumbContent, otherwise it will want to cram more content into it than it can hold, especially if the H and V scroll bars are off.
Keep the height attribute for scroller, though, because that's what you want to use to scroll (fixed dimensions).
Also, use percentages in your application. make thumbContent width="100%" if you want it to fill up the entire width of scroller.
I have a canvas in Flex that shall be able only to be scrolled in vertical direction, so I set the attributes of the canvas as follows:
verticalScrollPolicy="auto" horizontalScrollPolicy="off"
The problem here is that the vertical scrollbar covers the content when it appears - altough there is enough horizontal room left. I would have expected that the content size would have been automatically adjusted.
When setting the vertical scroll policy to "on", no content is covered also.
In case I set both scroll policies to 'auto' I also get a horizontal scroll bar just for scrolling to the area that is covered by the vertical scroll bar.
Is there a workaround how I can relayout the content of the canvas when the vertical scroll bar is shown so that it does not cover any content?
It's a bug. See Flex verticalScrollPolicy bug for a workaround.
Just a side note regarding this issue: it's actually not a bug, but known (and intended?) behaviour:
"Flex considers scroll bars in its sizing calculations only if you
explicitly set the scroll policy to
ScrollPolicy.ON. So, if you use an
auto scroll policy (the default), the
scroll bar overlaps the buttons. To
prevent this behavior, you can set the
height property for the HBox container
or allow the HBox container to resize
by setting a percentage-based width.
Remember that changing the height of
the HBox container causes other
components in your application to move
and resize according to their own
sizing rules."
-- From Sizing Components in the Flex 3 help, under "Using Scroll bars"
I had to find this workaround Flex ScrollPolicy.AUTO Not Good Enough which solved this issue, because Flex verticalScrollPolicy bug workaround did not work for me.
on vbox or another component based on Container, i solved that problem like that.
Wrong:
<mx:VBox width="100%" height="100%"
verticalScrollPolicy="auto" horizontalScrollPolicy="off">
<mx:Repeater dataProvider="{hede}">
<custom:RenderItem ........../>
</mx:Repeater>
</mx:VBox>
there is no scroll bar
Working version:
<mx:VBox width="100%" height="100%"
**minHeight="1"** horizontalScrollPolicy="off">
<mx:Repeater dataProvider="{hede}">
<custom:RenderItem ........../>
</mx:Repeater>
</mx:VBox>
I'm, too. I usually have some problems with the verticalScrollBar in Flex, so I prefer to use the browser's scrollbar for scrolling the complete application. You can found a workaround here: How to Resize the Flex Stage and Use the Browser Scrollbar.
The code I use:
In Flex:
ExternalInterface.call("setInitialFlashHeight", this.height);
In my HTML (JavaScript):
function setInitialFlashHeight(newHeight) {
document.getElementById('my_flash').style.height = newHeight + 'px';
}
And if you want to add (or remove) some height:
function addFlashHeight(height) {
var divHeight;
var obj = document.getElementById('my_flash');
if (obj.offsetHeight) {
divHeight = obj.offsetHeight;
} else if (obj.style.pixelHeight){
divHeight = obj.style.pixelHeight;
}
var newHeight = divHeight + height;
document.getElementById('my_flash').style.height = newHeight + 'px';
}
To remove, you use "-" instead of "+".