In the following example there is no horizontal scrollbar shown. As soon as I change horizontalScrollPolicy="auto" width horizontalScrollPolicy="on" it works fine. Anyone an idea whats wrong with this example?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ArrayCollection id="ac">
<mx:Array>
<mx:Object name="Text Text Text Text"/>
<mx:Object name="Text Text Text Text"/>
</mx:Array>
</mx:ArrayCollection>
<mx:List id="myList" width="100" height="100" horizontalScrollPolicy="auto" maxWidth="100"
dataProvider="{ac}"
labelField="name"/>
<mx:Tree width="100" height="100" horizontalScrollPolicy="auto" maxWidth="100"
dataProvider="{ac}" labelField="name" x="128" y="66"/>
</mx:Application>
thanks and regards
cyrill
Check this blog post: autoscrolling for flex tree
Quoting it:
The problem was that in a Tree (and other List-based components), when you set the horizontalScrollPolicy to auto, the scrollbars actually don't come out when they should. This seems like a bug at first, but we did this by design for performance reasons. In order to display the scrollbar properly, we need to measure the width of all the items (on-screen or not) and this would just take too much time to do by default. So instead, to get a scrollbar to show up, you need to set maxHorizontalScrollPosition, which is how much the user can scroll.
Related
I'm using the following code to load an image to the screen:
<s:Scroller xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%"
height="100%">
<s:VGroup width="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="top">
<s:Label width="100%" text="Being Active" fontSize="14" fontFamily="Black"/>
<s:Image fillMode="scale" smooth="true" scaleMode="letterbox" verticalCenter="0" horizontalCenter="0" width="100%" source="#Embed('assets/img/q3/q3c1all.png')"/>
....
....
</s:VGroup>
</s:Scroller>
In the attached image, it has three images
1. Builder view
2. final design (what designer expects)
3. rendered output (what users will see)
Because of the scaleMode letterbox, there is lots of space above and below image is blanked. And this breaks out the layer. Can someone suggest how can I make the out put looks like design preview (titled Requirement)
How to scale the image proportionately without distorting (like its done in CSS).
To those who struggle with this issue - the solution is to use which will give you full control over the bitmap. One thing to note is - if you are planning to use interaction / events with the image, wrap it inside a container and add click event to it.
I dont know if this is best solution, but it worked for me :)
In Flex4/mxml, I have a bunch of elements like TextFields, Buttons or anything else. I want to place them horizontally next to each other. But for cases where the browser window or screen resolution is too small such that not all of them fit horizontally, I want a layout which automatically shifts the superfluous elements to the row below.
In other words, I need a layout which comprises both, horizontal and vertical layouting, whereas horizontal has priority over vertical. So actually a very simple layout, yet I'm unable to find a solution. How can I achieve that?
For example, the following is a starting point:
<mx:HBox horizontalGap="0" width="{width-30}" horizontalAlign="center" textAlign="center">
<mx:Label paddingLeft="10" text="anytext1" />
<mx:Label id="warn12" text="anytext2" />
<mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
<mx:Label paddingLeft="0" text="anytext3" />
<mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:HBox>
The HBox places all Labels and Buttons next to each other horizontally, and if the screen size is too small, the right most items exceed the right screen border, but I want them to appear below on the left in a second row.
In addition, but less important, I want the Labels and Buttons to be centered if the screen size is bigger than necessary. That's what the horizontalAlign="center" and textAlign="center" are meant for.
You should be able to use a Tile element. It automatically wraps elements to a new line if the screen isn't wide enough to accommodate everything:
<mx:Tile id="myFlow"
direction="horizontal" width="{width-30}"
paddingTop="0" paddingBottom="0"
paddingRight="0" paddingLeft="0"
verticalGap="0" horizontalGap="0">
<mx:Label paddingLeft="10" text="anytext1" />
<mx:Label id="warn12" text="anytext2" />
<mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
<mx:Label paddingLeft="0" text="anytext3" />
<mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:Tile>
ive been pondering how to create the same type of resizing that acrobat connect does. i did read the documentation of percentage sizing. and i have implemented it. but its not how i want it to look.
to see an example : https://admin.na3.acrobat.com/_a204547676/flextras/
sorry Jeffrey to use you as an example. :)
just try to resize your window and see it... thats what im looking for .
any hints guys?
Given your code sample; the button is not given a height or width; so Flex sizes it automatically used a fixed width. Give the button a percentage width or height and it should resize appropriately as the screen changes.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="#FFFFFF">
<s:BorderContainer width="40%" height="70%" y="10" horizontalCenter="0">
<mx:Image height="100%" width="100%" id="img" source="http://upload.wikimedia.org/wikipedia/en/thumb/a/ab/Apple-logo.png/125px-Apple-logo.png" horizontalCenter="0"/>
</s:BorderContainer>
<s:Button y="543" horizontalCenter="0" label="start" width="40%" height="30%"/>
</s:Application>
ok i have tried it. but its not the result i am looking for. if you keep resizing back and forth the acrobat app you can see the entire app resizing compared to the above example.
its not quite the same.
I'm currently learning Flex, and am having the hardest time getting scroll bars to work. In short, I'm making a giant form for users to fill out, contained within a viewstack component. The user will type up information in one view, and it will be displayed in the other. But right now in the first canvas I have components that run off the screen and flex doesn't automatically add a scroll bar, so I added 'verticalScrollPolicy="on"' to my canvas. Now, while it gives me a scroll bar, it gives me an empty scroll bar. I still cannot move it up or down, meaning components are still trapped off the bottom of my screen. Am I missing something simple?
Edit - I'm using Adobe Flex Builder 3, and the components it lets you drag in. http://img12.imageshack.us/img12/218/problem1f.jpg This is a picture of the problem, and i guess relavent code would be.
<mx:Application xmlns:mx="adobe.com/2006/mxml" layout="absolute" width="830" height="835">
<mx:ViewStack x="10" y="72" id="viewstack1" width="790" height="751" >
<mx:Canvas label="Design Mode" width="100%" height="100%" verticalScrollPolicy="on" horizontalScrollPolicy="on" >
(Components inside)
</mx:Canvas>
I think the problem is in the way the content in your canvas determines it's height.
If I do this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ViewStack width="500" height="500">
<mx:Canvas width="100%" height="100%">
<mx:Canvas width="100" height="1000" backgroundColor="#ededed" />
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
I get scrollbars - Canvas has a default horizontalScrollPolicy and verticalScrollPolicy of auto, meaning it'll show the scrollbars as needed. I think, for whatever reason, the outer canvas isn't detecting that the content is taller than it should be.
if it can help some one : some related problem
I have list for which I require some space between the items and the list margin. The items inside the list are rendered from some other file. But when I add padding I cannot see any difference.
Something like this:
<mx:List id="List" selectionColor="red" itemRenderer="renderers.List"
doubleClick="Handler()" width="500" cornerRadius="4"
textAlign="center" height="335">
Also when mouse is rolled over only the item has to be highlighted excluding the padding.
Any suggestions? A sample code will be very useful.
Thanks
You are looking for useRollOver for, well, adding roll overs.
<mx:List useRollOver="true" />
As for the padding, you will need to do that in a custom item renderer.
Here is a good article to help you get started on making a custom item renderer:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
The below already has space between the left and right edges of the list and the items in the list, with them being laid out in the centre of the list. This is using the default itemRenderer.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:List id="List" selectionColor="red" width="500" cornerRadius="4"
textAlign="center" height="335">
<mx:Array >
[1,2,3,4]
</mx:Array>
</mx:List>
</mx:WindowedApplication>
Are you rendering text or images?
As for the selection of only the item and not the extra space, I'm not too sure about that one.