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.
Related
Snippet of my code pasted below :
<s:Scroller width="100%" height="100%" >
<s:Group width="100%" height="100%" >
<mx:DataGrid id="corrDataGrid" width="100%" height="100%" itemRenderer="
mx.controls.Label" minColumnWidth="60" lockedColumnCount="2">
</mx:DataGrid>
</s:Group>
</s:Scroller>
Both the horizontal and vertical scroll bars appear on the Datagrid if the volume of data is large . But the vertical scroll bar is only visible if we scroll the horizontal scroll bar till the end of the Datagrid . is there any way that even if the number of columns is large , the vertical scroll bar is visible and the user does not have to scroll horizontally till the rightmost side to access the vertical scroll ? Thanks.
Just remove the Scroller and the Group. DataGrid has its own scrollbars built-in which act exactly as you would expect. There is no need to wrap it in another Scroller.
As RIAStar pointed out, you don't need to wrap a DataGrid inside a Scroller. This is because the DataGrid's default skin already has a Scroller element that wraps a DataGroup element, which is used to actually render the data.
Now, you wanted to use a DataGroup directly, you would need to use a Scroller, just like in OP's case.
Thanks for all the answers guys , just fixed it . I set the width of the Datagrid to the width of the Scroller .
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.
I'm using a custom itemrenderer to display a list of photos and need to know how to control the width. At the moment it does this:
(source: tdwright.co.uk)
Which, as I'm sure you'll agree, is eye-bleedingly ugly.
The list is created like this:
<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
<mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>
And the itemrenderer component looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>
I've tried placing width="100%" in a whole bunch of places, but without success. If anyone knows how I can control this I'd be very grateful.
If you set these properties inside the itemrenderer verticalScrollPolicy="off" horizontalScrollPolicy="off" the bars are disappeared
I don't know why they choose for the terrible "off" instead of False
A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)
Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)
The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.
Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.
In addition to turning off the scrolling policy, set left and right to 0. That should anchor the width to the width of the parent.
I have a canvas in my Flex project. It has one child element.
I made the element's y property to 500 and a scrrollbar appeared on the canvas.
I dragged the scrollbar to bottom to see my element.
I moveed element to y = 200
After that the scrollbar is still on the same place. How can I update the scrollbar and move it to the top?
Thanks
Please, provide the code you're trying to use.
The following code behaves correctly (scrollbar disappears after clicking the label):
<mx:Canvas height="300" width="300">
<mx:Label id="tl" text="Moved label" y="500" click="tl.y=200;" />
</mx:Canvas>
Here's a problem I keep running into:
I have a lot of situations where I need to display some text with a styled container like so:
<mx:Canvas>
<mx:Text text="{text}" left="5" verticalCenter="0" right="5" />
</mx:Canvas>
As you can see - the text in constrained by the left and right margins of the canvas and I have not specified a height for the text control because I want it to grow vertically when I add text to it. Reason being - if there is one line of text I want it to display in the center of the canvas but if there are two or three lines of text I want the text control to show those two or three lines of text.
What keeps happening however, is that it will only display one line of text - no matter how many times I call invalidateSize() on it or the container. What do I do?
CAVEAT: The canvas height and width is set by the component that instantiates it (this is all wrapped up in a custom component) so I can't explicitly set the width or height of the text control...
NOTE: Ok, maybe it's an easy fix because as I was typing this question I figured it out - but, here's a chance to answer an easy question!?
The Text component needs a width if you want it to automatically wrap for you. If you used a string with newlines in it it will work grow as you expected without a width. For you, use:
Edit: Ok, you want it centered in a canvas of varying size. Then you can:
<mx:HBox
width="500"
paddingLeft="5"
paddingRight="5">
<mx:Spacer width="100%" />
<mx:Text
width="100%"
text="{text}" />
<mx:Spacer width="100%" />
</mx:HBox>
Take a look at the TextArea component.