I am trying to align my text over a VBox correctly. The VBox I am using has a background image. Then the label overlaps the image. This is basically creating an button I want.
The issue is that the background image I am using has a shadow effect on the bottom. So when I use verticalAlign="middle" on the VBox it isn't actually centered.
I have tried changing the VBox and the Labels y value, top & bottom properties, and verticalCenter property. None of them seem to shift the label up or down in anyway. I am confused on why these would not shift the label.
Here is my current code w/o any y, top, bottom or verticalCenter set.
<mx:VBox height="70" width="175" backgroundImage="{buttonBackground}" verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" buttonMode="true" useHandCursor="true" mouseChildren="false" click="{controller.goToPage('configPg')}">
<mx:Label text="Configure" buttonMode="true" useHandCursor="true" mouseChildren="false" fontSize="24" color="white"/>
</mx:VBox>
Any help would be greatly appreciated.
Thanks
I was able to solve this by adjusting the paddingBottom. Thanks drkstr1 for the answer.
All the properties you tried are irrelevant in a layout container. Use the font styles to position your text (EG. padding, verticalAlign, textAlign, etc.), Or use a Canvas with manual positioning if there is nothing else in the VBox. – drkstr1 Nov 14 at 17:25
Related
I wants to add vertical scroll bar in textarea spark component, i.e I want to show maximum 5 lines in textarea if text line will more than 5 then vertical scroll bar will automatically add and if i will reduce the text line then vertical scroll bar will automatically disappear.
My textarea code is :
<s:TextArea id="txtArea" width="{this.width}" height="3" borderVisible="false" focusAlpha="0.01"
selectionHighlighting="always" styleName="TextBox"
needsSoftKeyboard="true" focusRect="false" direction="{textBoxDirction}" buttonMode="true" useHandCursor="true" mouseChildren="true"/>
I also tried to use verticalScrollPolicy = "on" and "off" but it is also not working.
So if anybody have an idea how to add vertical scroll bar in textarea please help me to solve this problem.
Use
heightInLines="5"
instead of
height="3"
Just put the mx:TextArea with width="100%" inside a mx:VBox container with a fixed height.
i am flashAs3.0 developer but am new to flex.Can anyone help me how to Create a Horizontal scroll-er in list view by adding images dynamically.i am using flash builder 4.6.
here i tried this code.but i need to Create a Horizontal scroll-er in list view by adding images dynamically.Help me regarding this pls.Thanks in advance
<s:Scroller width="100" height="100">
<s:Group>
<mx:Image width="300" height="400"
source="#Embed(source='assets/logo.jpg')"/>
</s:Group>
</s:Scroller>
You may need to add the following arguments to your scroller:
<s:Scroller horizontalScrollPolicy="on" verticalScrollPolicy="on">
These should force the scroll bars to appear, if you still can't scroll then the container inside the scroller isnt setting it's height and width correctly, try:
<s:Scroller horizontalScrollPolicy="on" verticalScrollPolicy="on" height='150' width='150'>
<s:Group height='100%' width='100%'>
<s:Image height='400' width='300'/>
The group should size itself to it's children and as the scrollers viewport it should create the correct scroll area.
Im not completely sure the situation you are describing. With your current code a horizontal scroll bar is added to the image. If you add more images dynamically and you want them to stack horizontally then you will need to use an HGroup instead of a normal group.
<s:Scroller width="100" height="100">
<s:HGroup>
<mx:Image width="300" height="400"
source="#Embed(source='assets/logo.jpg')"/>
</s:HGroup>
</s:Scroller>
This is how I understood your question. My apologies if I am off track.
Good luck.
I have a set up that looks something like:
<mx:Canvas>
<mx:Image id="mayimage"/>
</mx:Canvas>
<mx:Button id="watermark"/>
Where the button is the watermark that I want to keep on top of the image.
But after loading the actual image dynamically using addChild into "myimage", the skin of the button(which is embeded using #Embed) is covered up by the new image.
The weird thing is, it looks fine in Firefox, where the watermark button is still on the very top layer, it only gets covered up in Chrome. Also, the button is still clickable even though it's covered by the image, meaning only the skin of the button is covered...
Anyway of keeping the skin of the button on the very top layer?
If we consider this:
<mx:Canvas id="myCanvas">
<mx:Image id="mayimage"/>
</mx:Canvas>
<mx:Button id="watermark"/>
and you use myCanvas.addChild(myImage) the image will never overlap the watermark. Are you by any chance adding it to the upper level canvas?
Don't use addChild to display your image, just change the source property of myimage.
Working with Flex 4.6 spark forms, i encountered strange behaviour:
FormItem element ALWAYS has inner gap (padding), which cannot be removed.
Red area on image ilustrates the unwanted GAP that i cannot manage to get rid of.
Blue border represents Form component. Grey border (thin) represents FormItem component.
FormItem has no padding or gap property.
This is the code for image above:
<s:Form id="form">
<s:layout>
<s:FormLayout gap="0"
paddingBottom="50"
paddingTop="0"/>
</s:layout>
<s:FormItem width="100%" label="RC">
<s:TextInput id="myTextInput" width="215"/>
</s:FormItem>
</s:Form>
When developing for mobile, you want to make best use of every pixel on your screen. This is unacceptable for me since i want to have several TextInput fields and having this gap will waste lots of space...
So my question is, can the red GAP be removed? I want my FormItem to have padding 0 - meaning TextInput border will touch FormItem border...
Well things like that are usually managed by the skin of the component, so what you have to do is to provide your own skin for your FormItem components. The easiest way to do it is to copy the skin provided by Adobe and make some tweaks that'll accomplish what you require. Most of all you have to set baseline to maxAscent:0 on row1 ConstraintRow and bottom to row1:0 on sequenceLabelDisplay, labelDisplay and contentGroup components.
I have a layout question for Tab Navigators in Adobe Flex 3.
Is it possible to insert a button that invades the grid space of the tabs?
I have a tab navigator component and I am dynamically adding sub components to tab navigator and I want squeeze a button inside the tab space. I don't want the button to be another tab. And I don't want to use a TabBar for the tabs.
This graphic illustrates the problem.
This is the current layout I have
This is a mockup (photoshopped) of the layout I want. I basically want to shave some pixels off the layout.
Is there a way to push the button down or manually override its layout position in MXXML or actionscript?
I would think if you put the elements in a Canvas (which allows you to lay out elements absolutely) rather than a VBox as it appears you are using now, you could force the Home button to display the way you want it to, ie:
<mx:Canvas>
<mx:Button top="5" right="5" />
<mx:TabNavigator top="5" left="5" right="5" />
</mx:Canvas>