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
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 am playing around with flex 4 GUI with a simple alignment but couldnt figure out why.
I have button1, button2, and a text field. I want to align them horizontally, and center vertically for the text.
For the following code, i see the following output.
_______ ______
|bt1 | |bt2 | text1
|______| |______|
my question is;
1) why with the properties i sent on btn 1 verticalCenter="10" and btn2 verticalCenter="-10" they are still aligned? shouldnt i see one is up and the one is donw?
2 ) why my text1 is aligned top, even though i set it to verticalCenter=0, i tried it with or without in a group.
Thanks guys
<?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" minWidth="955"
minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group minWidth="100">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="myButton" click="" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>
It might be helpful for others to understand why this occurs, as it is a common problem.
When you use a HorizontalLayout or VerticalLayout some properties you set on the "layout objects" are not used. This occurs because these properties do not really work or make sense in a vertical/horizontal layout.
Layout properties that are ignored by vertical/horizontal layouts:
x and y coordinates
horizontalCenter and verticalCenter
top, bottom, left, right contstraints
The above properties will work for the default BasicLayout class.
As indicated in the answer by #Mahesh Parate, the vertical/horizontal layouts do allow for content to be centered by using the horizontalAlign and verticalAlign properties.
Below code may help you: - add verticalAlign="middle" in HorizontalLayout this will solve your problem.
<?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" minWidth="955"
minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function onClickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<s:Group minWidth="100" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<s:Button label="myButton" click="onClickHandler(event)" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="onClickHandler(event)" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>
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'm trying to word wrap a richeditable text but I'm having some problems:
I want it to wrap vertically so I can avoid the horizontal scrollbar.
The Air app only has a spark list and the itemrenderer used is this:
<?xml version="1.0" encoding="utf-8"?>
<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:RichEditableText width="100%" height="100%" multiline="true" text="{data.text}"/>
</s:ItemRenderer>
Any ideas ho to fix this? Thank you.
Add minWidth to your text component like so:
<s:RichEditableText width="100%" height="100%" minWidth="0" multiline="true" text="{data.text}"/>
This is an old trick to force a component to calculate its size properly.
lineBreak property seems to work for flex 4.5 in actionscript and mxml, but only in mxml in previous versions.
<s:RichEditableText lineBreak="toFit" width="100%" height="100%" multiline="true" text="{data.text}" />
Set the ItemRenderer width to 100%:
<?xml version="1.0" encoding="utf-8"?>
<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"
width="100%">
<s:Label width="100%" text="{data.text}"/>
</s:ItemRenderer>
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.