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.
Related
CSS Custom Scrollbar style
I've been having a hard time customizing the scrollbar the way I intend and maybe it's not even possible.
I want to add a custom image to the scrollbar-thumb background with rectangles on both ends of it. The conceptual idea is to be able to keep top and bottom of the scrollbar-thumb with a custom icon image, but I represented it as a rectangle in the example.
Since the size of the scrollbar is not always the same I'm looking for a way to achieve what I described before.
I've failed to do it using ::-webkit-scrollbar.
Visual example:
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
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.
Is it possible to place the Tabs on the bottom of a TabNavigator?
Currently, I want to see if Flex4 can create tabs for me positioned on the bottom.
Currently I can use library://ns.tink.ws/flex/mx for his positionedTabNavigator and yet it looks wonky, when I apply rounded corners on the tab, it rounds the wrong end.
There is no TabNavigator in Flex 4 (at least not a Spark component), you have to roll your own out of a TabBar and a ViewStack. So the good news is, you can put the TabBar anywhere you want.
Here's an example: http://devgirl.wordpress.com/2009/11/16/tabbed-navigation-in-flex-4/
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>