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">
Related
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.
I have a list component with a (row oriented) tile layout in a group that sits in the main Application.
I want the list to be centred vertically when there are not enough items in to fill the application window height, so verticalCenter="0".
However, when there are more items than can fit vertically on screen, the list expands beyond the application window height and the scrollbar doesn't kick in.
I can remedy this if setting the list height to 100%, but that means it's not vertically centred when it contains less items.
The ideal solution would be maxHeight="100%", but of course maxHeight doesn't work with percentages. How would I go about achieving this behaviour?
Thanks,
Tim
Edit: Please see the code below:
<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"
applicationComplete="applicationCompleteHandler(event)"
width="800" height="600"
showStatusBar="false">
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
import mx.events.FlexEvent;
protected function applicationCompleteHandler(event:FlexEvent):void
{
var arrayList:ArrayList = new ArrayList;
for (var i:int = 1; i <= 50; i ++)
{
arrayList.addItem(String(i));
}
list.dataProvider = arrayList;
}
]]>
</fx:Script>
<s:List id="list"
itemRenderer="itemRenderer"
useVirtualLayout="false"
horizontalCenter="0" verticalCenter="0"
borderVisible="false">
<s:layout>
<s:TileLayout orientation="rows"
requestedColumnCount="4"
columnWidth="150" rowHeight="150"/>
</s:layout>
</s:List>
</s:WindowedApplication>
This is my item renderer:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="0"/>
</s:stroke>
</s:Rect>
<s:Label text="{data}"
horizontalCenter="0" verticalCenter="0" fontSize="50"/>
</s:ItemRenderer>
If the for loop is changed to only 10 iterations, the list is centred vertically on the screen. Otherwise the list expands beyond the screen, centred vertically and no scrollbar appears.
Using clipAndEnableScrolling hasn't made any difference. I've also tried putting the list inside a group with 100% width & height, but I'm getting more or less the same behaviour except the list is flush to the top when it is taller than the container.
You can try something like this:
<s:List id="list" maxHeight="{list.height}" height="100%" />
You could also change the maxHeight value whenever it's parent container changes sizes.
To get a complete answer, I think you're going to have to show some code about how things are set up.
Here's how to automatically set the maxHeight value whenever the parent container changes size (as JeffryHouser suggest above):
<s:Group id="boostListParent" width="100%" height="80%">
<s:List id="boostList" width="100%" maxHeight="{boostListParent.height}" height="100%" itemRenderer="views.BoostTierItemRenderer"/>
</s:Group>
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 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.