I have layout with two forms. I'm using scroller but scrollbars don't align to window but appear somewhere in the middle of the application screen.
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Scroller width="601" height="539">
<s:Group >
<s:Form x="5" y="10" >
<s:FormItem width="265" label="Name:" textAlign="right">
<s:TextInput width="150"/>
</s:FormItem>
...
</s:Form>
<s:Form x="300" y="10">
<s:FormItem width="265" label="Color:" textAlign="right">
<s:TextInput width="150"/>
</s:FormItem>
...
</s:Form>
</s:Group>
</s:Scroller>
</s:WindowedApplication>
Below You can see screen-shot of my app. There is no scrollbars at the borders.
Here is the screen-shot with scroller set to width and height to 300 pixels.
As You can see the scrollbar is not attached to window.
If you want the scroll bar on the right, to be on the right of the window, then set the width to 100%. Same for the height.
if you want the whole WindowedApplication to scroll, enable scrolling on the WindowedApplication in the properties tab, or add a canvas that is full width and height.
try to modify the code like this :
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
<s:Scroller width="100%" height="100%">
<!--... the rest of the code-->
it should be worked.
Related
In the following code you can see that I have 2 identical bordercontainers (bordercontainer1 & bordercontainer2) with each a surrounding group (surroundinggroup1 & surroundinggroup2).
The bordercontainers have a maxwidth of 250 pixels and a width of 100%.
Basically, I want them to take up to 250 pixels of space but if there is less space available, take up as much as possible.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup id="maingroup" width="100%">
<s:Group id="surroundinggroup1">
<s:BorderContainer id="bordercontainer1" height="50" maxWidth="250" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
<s:Group id="surroundinggroup2">
<s:BorderContainer id="bordercontainer2" height="50" maxWidth="250" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
</s:HGroup>
</s:WindowedApplication>
The problem is that the surroundinggroups seem to ignore the maxwidth and use the minimum width needed to draw the bordercontainer so that the label containing "test" fits:
I figured setting the surrounding groups width to 100% would solve the issue but this causes the surroundinggroups to take up as much space as possible causing a gap between the 2 bordercontainers:
The only solution seems to be to remove the surroundinggroups, then the layout is as I want it:
The problem here is that, in the real application, these surroundinggroups contain some other components and logic. Removing them would could cause quite some other changes.
Is there no way to achieve the desired outcome (image 3) while keeping these surroundinggroups?
This should do the trick, for some reason I thought that you didn't want size constraints on the surrounding group, but that was just in my head. I moved the maxWidth and 100% to the surroudinggroups, the Bordercontainer width="100%" is also important for what you want.
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup id="maingroup" width="100%" >
<s:Group id="surroundinggroup1" maxWidth="250" width="100%">
<s:BorderContainer id="bordercontainer1" height="50" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
<s:Group id="surroundinggroup2" maxWidth="250" width="100%">
<s:BorderContainer id="bordercontainer2" height="50" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
</s:HGroup>
</s:WindowedApplication>
I know this question has been asked before but the other solutions didn't work for me quite well.
here's my sample application.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="200" height="300">
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
]]>
</fx:Script>
<s:Group top="0" bottom="0" left="0" right="0">
<s:VGroup width="100%" gap="10">
<s:RichEditableText id="text1" editable="false" width="100%" height="60" minWidth="0"
textFlow="{TextConverter.importToFlow('some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text', TextConverter.TEXT_FIELD_HTML_FORMAT)}" />
</s:VGroup>
</s:Group>
</s:WindowedApplication>
I tried to mimic my application structure as much as possible.
basically I want the text in 'text1' to wrap around. This won't work if i set the height to 60 pixel which is what I want. But if i change height of text1 to 100% (or remove height all together) then all of sudden I get word wrap. It seems like it doesn't like fixed height. I'm not sure what's going on here.. adding minWidth="0" didn't help nor setting lineBreak="toFit".
any ideas?
Try to set width as explicit value
I'm pretty sure my dynamic mxml layout must give me two scrollbars (horizontal and vertical) but it only shows vertical one.
Am I missing something or is it a bug?
<?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" width="100%" height="100%" xmlns:local="*">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myData:ArrayCollection = new ArrayCollection([
{name:"Jane"},
{name:"Sonny"},
{name:"Alicia"}
]);
]]>
</fx:Script>
<s:Scroller width="100%" height="100%">
<s:VGroup>
<s:Group minHeight="600" minWidth="800" height="100%" width="100%">
<mx:HDividedBox id="div1" width="100%" height="100%" autoLayout="true" liveDragging="true">
<mx:DataGrid width="100%" height="100%" dataProvider="{myData}"/>
<mx:DataGrid width="100%" height="100%" dataProvider="{myData}"/>
</mx:HDividedBox>
</s:Group>
</s:VGroup>
</s:Scroller>
</s:Application>
Remove the VGroup inside the Scroller or change it to Group!
Seems that the horizontal scrollbar is not shown when using VGroup as first child
You haven't set horizontalScrollPolicy and verticalScrollPolicy for the Scroller and hence they have their value set to the auto. The behavior in this case is to display the scrollbars only if necessary.
The scroll bars are displayed according to the vertical and horizontal scroll bar policy, which can be auto, on, or off. The auto policy means that the scroll bar will be visible and included in the layout when the viewport's content is larger than the viewport itself.
Try with
<s:Scroller width="100%" height="100%" horizontalScrollPolicy="on">
I have the following application and I am trying to put a scrollbar somewhere inside the TabNavigator, preferably on the innermost Vbox, but the scrollbar always ends up on the Panel. Is there some kind of property which controls this? I thought height=100% would have controlled it but it doesn't seem to work.
Sample is here. You can view source on it:
VBox Sample
Here is the source anyway:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
<mx:Panel width="400" height="400">
<mx:TabNavigator width="100%" height="100%" creationPolicy="all">
<mx:VBox label="Tab 1" width="100%" height="100%">
<mx:ViewStack width="100%" height="100%">
<mx:VBox width="100%" height="100%">
<mx:Text width="100%" height="500" text="This box is taller than the Panel, but the scrollbar is on the window." />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>
I found the proper solution is to set the minheight on the box to 0. When the minheight is not defined, the box will try to remain at it's measured height. By setting the minheight you are telling the box it is ok to shrink.
I've had this issue in the past, and the solution is a bit wonky, but hopefully this helps:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Panel width="400" height="400" verticalScrollPolicy="off">
<mx:TabNavigator width="100%" height="100%">
<mx:VBox id="container" label="Tab 1" width="100%" height="100%">
<mx:ViewStack width="100%" height="{container.height - 20}">
<mx:VBox width="100%" height="100%">
<mx:Text width="100%" height="500" text="This box is taller than the Panel, but the scrollbar is on the window." />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>
Flex seems to calculate dynamic component dimensions properly about 98% of the time, but sometimes we need to "massage" the logic.
When you look at your layout hierarchy (as I've shown above), you just need to name the parent container (in this case Tab1) for the purposes of data binding, then use that container's height property for your sizing. (you also don't need to explicitly state verticalScrollPolicy="off" on the panel, but I use if for good measure :P)
Note that you may need to subtract a bit from the given height or your scrollbar will be below the component bounds ;)
Im trying to create a layout in flex using mxml, the layout contains a Canvas component and a Box. The layout should always be such that the Box sits at the bottom edge of the application and has a fixed height, whereas the Canvas fills the remaining stage area and does not overlap with the Box.
My MXML is as follows;
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" clipContent="false" verticalGap="0">
<mx:Canvas width="100%" height="100%" />
<mx:Box width="100%" height="30"></Box>
</mx:Module>
I've tried using a dynamic binding to set the height on the Canvas (height="{this.stage.height - 30}") but it yields the wrong results.
Is there a simple way to achieve what I am after without setting the height using Actionscript?
<Module layout="vertical" xmlns="...">
<Canvas width="100%" height="100%">
<HBox width="100%" height="30"/>
</Module>
By setting layout="vertical" the Module will work more or less like a VBox. The Canvas is set to fill 100% vertical and horizontal, but space will be left for the HBox, because it has an explicit height.
I haven't used Modules much, but this works:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="100%"
height="100%"
>
<mx:Canvas left="0" right="0" top="0" bottom="0" />
<mx:HBox
width="100%"
height="50"
bottom="0"
>
....
</mx:HBox>
</mx:Application>
Hope that helps!
I was able to use;
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" clipContent="false" verticalGap="0">
<mx:Canvas bottom="30" left="0" right="0" top="0" />
<mx:Box width="100%" height="30"></Box>
</mx:Module>
This solved my issue, as the Canvas would fill the space available up to the Box. Setting the bottom property to 0 on the Canvas, would cause it to expand past the Box and fill the entire stage.