Flex :: Prevent Container In ItemRenderer From Exceeding Width Of List Container?
Jul 2, 2011
In a Flex Mobile project I have a simple itemRenderer where I'm trying to create an "bubble" texting effect, similar to ichat or iphone (just so you get what im going for). But if the text is longer than the screen it runs off, rather than just going down a line.
If I set Group thats holding the rectangle(to create the bubble effect) and the label to 100% it works and keeps it from exceeding the list containers bounds, BUT the group is always at 100% and looks bad, I'm trying to keep the "bubble" JUST AROUND the text.
Anyway so, at the top of my itemRenderer I tried specifying:
And here's my layout I figured since msg_container has a width of 100% I was hoping bubble_lable_group would just not exceed that but...it doesnt...it just runs off. I tried setting a max width but that does not allow you to input percents. And just to say it 1 more time. I know if i set bubble_lable_group width to 100% it works, and keeps it from going off the edge, but then the rectangle "bubble" stretches all the way across and just looks bad.
I have a canvas onto which I draw shapes like rectangle etc. When I move the shape using my custom mouse down/mouse move handler, the shape can go outside the parent bounds.
I am checking if the child is outside the parent's bound to snap it back:
var bounds:Rectangle = this.getBounds(this.parent); var p:Point; if (bounds.x <0) {
[Code]...
The snapInside method gets called when I go outside the left or top boundary. But when the child is dragged outside the right or bottom boundary, I find Flex/Flash runtime automatically expands the parent's height and width. So say the parent size was initially 800x600, if child Y bounds exceed 800 by say 20 pixel, I find the this.parent.height automatically resized by flex to 820!!
How do I prevent the parent from resizing when child goes outside the original bounds of the parent ?
I have a loop that goes through data from a book and displays it. The book is not consistent in it's layout so I am trying to display it in two different ways. First way(works fine) is to load the text from that section in to a panel and display it. The second way is to create a new panel (panel creates fine) and then add collapsable panels(nested) to that panel. Here is the code from the else loop.
else if (newPanel == false){ // simpleData is just for the title bar of the new panel // otherwise the panel has no content
[Code]....
The error I get is: ReferenceError: Error #1069: Property panel4.4 not found on components.readTest and there is no default value.
I have tried setting the "name" property instead of the "id" property.
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: Which, as I'm sure you'll agree, is eye-bleedingly ugly. The list is created like this:
I am creating an flex Air project,so mxml file will run. I have circles in one Big circle at one side and will be same on other side.
Now how to drag any circle from any Big circle to other side. Or it could be like any two container having circles, then how to drag and drop circle?
For one circle i am able to do drag and drop.But I want one Big circle on left hand side and one big circle on right hand side .And small circles with class names will be in these big circles.Now i want to drag and drop those small circles in big circles.Big cicles should not move. Even i have tried this code in actionscript
I've got the following situation, where I have an outer Vbox that is set at a fixed width, and then inside it there is a header made from an HBox and a content area (Canvas) that is much wider than the enclosing VBox (and therefore requires scrollbars on the outer VBox to see it all).
I would like to set the width of the header to fill the entire width of the outer container, but only the visible part, and to remain fixed so that when I scroll to view the content, the header doesn't move.
How can I limit the size of a child container with percentage width/height of 100%?
Example:
<mx:HBox id="container" width="100%" height="100%"> <mx:HBox id="scrollContainer" width="100%" height="100%"> <!-- keep this content limited to the size of "container" -->
[Code]....
Apparently I can get the desired behavior if I change HBox to Canvas but I would still like to know how to accomplish this with a HBox and why it differs from Canvas.
I'm currently working on a custom component which extends Canvas (let's call it SuperCanvas) ; it's basically a container that let you zoom & pan its contents. It would be too long to explain why, but I can't use scrollRect, so I was forced to declare a Canvas object (called innerCanvas)... inside my SuperCanvas (I know, not very nice =/) I would like to know if there's a proper way to "redirect" the creation of my component's children in this canvas.
I am facing a issue in Flash container. I am having a project which has main container which call different SWFs into it. Now I call this main container file into another container, and their problem starts. Many option doesn't work properly which generally have _root, _parent etc...
If I want to run project (main container SWF and child SWFs) into another container file which place on a website. I want to show whole project from this container file so what I need to do?
I have a root folder that calls a container loading movie-a. The problem is that this movie-a has a red symbol that scrolls from the outside to the inside of the movie. If I loaded the movie-a by itself it wouldn't show the symbol outside but as this is inside a root... well... it shows (see image). Is there a way to set container width-height? I know I can mask it but I don't want to to that because I have other symbols flying around the movie.
I need to place an image into a container. The problem is that I will not know the size of the image or the container beforehand, so it all has to be dynamic.this is how I started (have not gotten to stage(or container) changing size yet. No matter what I try, either all the images are the same width, or they are all the same height. If some images are portrait and other landscape, I don't want all the images to be X pixels high. In this variation of the code, all the images turn out the same height, regardless of portrait or landscape.
ActionScript Code: var ratio:Number = container.width/container.height;//get the ratio, if width is bigger than height then ratio is greater than 1, else ratio is smaller than 1
I know this might seem like such an easy issue and I can't understand why I cant figure it out but none the less I can't and I've just about given up. Here's the issue:
I have a sprite container which is supposed to hold a bunch of thumbnails to videos. I am able to populate the container with all the videos and the whole works but obviously if I add a bunch of videos its going to exceed the size of the flash document so I need to add a UIScrollBar (which I did) now the scrollbars target is set to the container but isnt allowing me to scroll and if im correct this is because the container doesnt have a set height. So Im trying to set the height of this container but the second I try setting the height or even width all my thumbnails I used to be able to see are gone! It's as if the size is being set to 0 when its not I've even tried to set it to a specified size just to test and nothing.
I've got a container(sprite) with children(sprites) added to it. When I scale the container, I would like to get the new width of a child, but when I trace the children's width I always get the original dimensions, even though everything gets visually scaled as it should. How do I overwrite the children-width ?
Update: I just found out that the children.graphics-"dimensions" could have caused the problem. When I leave the graphics, everything seems ok. Is it possible to scale the graphics at same time as the child-sprite?
I have spent nearly a day on this now, searching everywhere, but never found anything. This is my desperate attempt to get my problem solved. I have a container (ContentHolder extends Sprite), which holds another container (Content extends Sprite) which has a TLFTextfield in it.
Now when I resize the ContentHolder, its children get resized too. I have overridden set width and set height in the Content class, because I need the Content to resize differently than just scale. I want the TLFTextfield width to adjust to ContentHolder width, while maintaining font size. So ideally the TLFTextfield would set different line breaks, according to the width of ContentHolder.
I really have no idea how this can be achieved. One solution may be to create a new TLFTextfield instance with the updated height and width values, but that could look messy when drag-resizing the ContentHolder..
I am trying to load a swf(as3) into another As3 Swf with the Movieclip loader. After loading however Loader.width/loader.content.width returns an exaggerated value than the actual width of the swf being loaded. Any pointers on where to begin looking for the discrepancy?
More Details (if it helps)
The swf being loaded has UI components like dropdowns, input boxes and combo boxes (its a Form to fill up), and a coded one-time tween. When the child MC loads into the parent movieclip, the Loader.width value returned is exaggerated by about 28 pixels (although the height remains the same). Loader.content.width also returns a 28 pixel exaggerated value. The Exaggerated value is more than even the stage width of the child MC. The extra ~30 px are upsetting subsequent code in the parent movie to scale and center the loaded swf.
update:
stage.stageWidth returns the correct Value.Code used in the parent MC, to load external SWF:
private var deadURL = "child.swf"; private var deadReq:URLRequest = new URLRequest(deadURL); private var deadLoader:Loader = new Loader();[code].....
I have a container object that i add children to. I want to change the height & width of the container without the children scaling. In this case I draw a rectangle in flash which I'll use as the container object then export for AS.
On the stage I have a movieclip (Container, originally 200px width) and inside it with a progressbar movieclip (originally 700px width), scaled with Free Transform Tool to fit the parent container. The width of the container changes run-time while resizing the scene.
In ActionScript I have a function which should set the progress bar width according to a calculated percentage value:
private function updateProgress(event:TimerEvent):void { var barWidth:int = _container.width; var progress:Number = _stream.time / _stream.duration * barWidth; _progressBar.width = progress; }
My problem is that the progressBar even at full time (100%) is only at 1/4 of the parent container. I assume that it comes from the symbols original size.
Can I correct this programatically, or I must redesign it with the "designer"?
For some reason below is not working. It is probably very obvious but I am not seeing it. As soon as I comment out the container mc variable and just add Child to root timeline I see everything which means me container is not being added to the stage correctly.
stop(); import flash.display.MovieClip; var i:int = 0; var a:Number = 10; var ageString:String; var ageText:Array = new Array(); [Code] .....
In a flex project that I have that is designed to scale 100% to the web window, I have a spark list. And I have a simple itemrenderer that takes the data and displays a name, and a message. Just think of it like a simple instant messenger display. The problem is that for my msg_txt label I want to give it a width thats the width of the parent list thats holding it.I tried turning the horizontalScrollPolicy to off, also tried width="this.parent.parent.width}" (as well as this.parent.width) for the spark label inside the item renderer. and in the label i tried some things like left="0" right="0" maxWidth="{this.width}" but nothing really does the trick.How can I make this label have a max width of the list thats holding it, AND make sure it resizes if the size of the browser changes and the list size changes?heres the list:
In the root of my application I have 5 named "slots" (layers) that I want content to appear in. Should I be using Canvas, Group or something else for each of these slots? I don't need any kind of automatic layout inside these slots.
I'm using flex and drawing a circle using the Spark Ellipse primitive. I am setting the x,y coordinates of the circle myself. I am drawing them within a TitleWindow component. Is it possible to force the circle to not be allowed if I specify a coordinate that is outside the TitleWindow? Or do I have to check the coordinates manually myself?
I have a Flex list and a custom ItemRenderer. I'd like to be able to have some items in the list use a different ItemRenderer (say, depending on the class of the item). Is this possible?
Please help me what container component I will use. Here is my problem, I have advance data grid with full of data about 300 by 300 row-column(data can be picture). Now I need a container that can zoom in/out, fit to screen capability and can drag around the component inside so that my data grid will be zoomable and dragable around the container(Easy for the user to read content inside my datagrid).
URL...Whenever a chat is added, I want it to completely show the last message. I'm using maxVerticalScrollPosition to set the scroll position on the list, but it is always wrong (see the example). It undershoots it by a row or so. I've tried this with a regular container and it does the same thing. If I do maxVerticalScrollPosition+1, it sort of works, but if the last message is particularly long, it will be cut off (only show the top). How can I get it to scroll to the actual bottom of the container??[code]
