I have a buttonbar which has both buttons with only small icons and buttons with short text labels. Problem is that each button gets huge padding while I want to set width of the button relative to its contents. Below is illustration of my problem:
Current one http://i.imgur.com/I8goS.png
With buttonWidth=32 http://i.imgur.com/s0fD5.png
I can set buttonWidth to 32 for my buttonbar which works fine for my icons, but not for text. Is there way to remove that huge padding of the buttons?
If I understand what you are after there, you can use a layout inside the buttonbar tag something like this:
<s:layout>
<s:HorizontalLayout variableColumnWidth="true" gap="0"/>
</s:layout>
Related
How could I add separating line around HBox children component?
Like if I choose borderstyle as solid for the hbox, the problem is the line between the children component, like text components, who could I show it in efficient way, not just adding HBox to each element.
A HBox is just a box with a horizontal layout of children - it doesn't actually have vertical lines running between those children, so you're not going to be able to use borders or anything on the HBox.
Your best bet is probably adding VRule components in between each child component, something like:
<mx:HBox width="100%" borderColor="#000000" borderStyle="solid">
<mx:Image />
<mx:VRule height="100%" strokeColor="#000000" strokeWidth="1"/>
<mx:Image />
<mx:VRule height="100%" strokeColor="#000000" strokeWidth="1"/>
<mx:Image />
</mx:HBox>
You can adjust the VRule and HBox border styles to be consistent however you like. The only other options I can think of are to put borders around each child component with no border on the HBox (may need child padding depending on your components), embed all your components in Box components within the HBox like you suggest, or doing something completely crazy like using a HorizontalList and embedding your components in a custom item renderer that is a consistent size with a border.
Personally I'd just use VRule separators and move on. I'd rather double up on children than have all my components of interest one family level deeper in the HBox. If you need to generate your HBox children from a variable array or suchlike, then you may want to put each one in a Box and use a Repeater or something. Some more detail would help for more specific answers.
I am displaying some HTML text in an Adobe AIR Application that I do not want the user to be able to cut and paste. How do I make the HTML control disallow highlighting of the HTML without disabling the ScrollBars. mouseChildren=false works but disables the scrollbars which is unacceptable. Right now I have:
<mx:HTML location="http://dexter/preview.html" width="100%" height="100%" id="PreviewArea" x="0" y="0" tabEnabled="false" tabChildren="false" focusEnabled="false" focusRect="null"/>
But it's not working properly either.
I have also tried overlaying a disabled transparent text control over the top of the HTML component, but the user is still able to tab to the HTML and use the keyboard controls to copy the text to the clipboard.
Any hints?
You probably have to extend the HTML Component. Make the scroll bars, if applicable, usable, but apply set mouseEnabled, mouseFocusEnabled, mouseChildren, and focusEnabled to false on the inner display.
Alternatively, you could wrap the HTML component in a canvas. Set the HTML Component to it's measured height and measured width. Set the HTML Component to be 'unusable' with the above properties, but make the canvas usable.
Doesn't the HTML component display renderered HTML; not HTML Text? If you're displaying HTML Text, then you can use the TextArea and set editable and selectable to false.
I'm having some issues aligning the header text of a datagrid.
I'm using an embed font for the header text, and when applying the css, the header text behaves as if I'd set the text vertical align to top.
I'm trying to vertically center the text, but haven't found a way to make it work.
An image to give you a better idea:
alt text http://www.freeimagehosting.net/uploads/d9657df077.jpg
Any tip?
Regards,
BS_C3
Are you using a headerRenderer? A simple headerRenderer might look like:
<mx:HBox width="100%" height="100%" verticalAlign="middle">
<mx:Label text="{data.name}"/>
</mx:HBox>
This will center the label vertically inside the box. You can position horizontally as well.
Almost a year old but nevertheless..
Add a style like
// can be top/middle/bottom
.headerStyleClass {
vertical-align:bottom;
}
and then make use of this style in your column as follows
<mx:AdvancedDataGridColumn dataField="xyz" headerText="Deriv/FX" ***headerStyleName="headerStyleClass">***
You should get the desired output
I'm using a custom itemrenderer to display a list of photos and need to know how to control the width. At the moment it does this:
(source: tdwright.co.uk)
Which, as I'm sure you'll agree, is eye-bleedingly ugly.
The list is created like this:
<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
<mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>
And the itemrenderer component looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>
I've tried placing width="100%" in a whole bunch of places, but without success. If anyone knows how I can control this I'd be very grateful.
If you set these properties inside the itemrenderer verticalScrollPolicy="off" horizontalScrollPolicy="off" the bars are disappeared
I don't know why they choose for the terrible "off" instead of False
A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)
Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)
The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.
Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.
In addition to turning off the scrolling policy, set left and right to 0. That should anchor the width to the width of the parent.
I have a DataGrid with an drop-in Button itemRenderer:
<mx:DataGridColumn headerText="" width="135"
itemRenderer="ActionButtonItemRenderer" />
However, the button extends all the way both the right and left edge of the DataGridColumn. I've tried messing with the width properties and paddingLeft and paddingRight styles of both the DataGridColumn and the itemRenderer, but nothing seems to work.
NOTE: I do not want to use a Container or UIComponent with the Button as a child as the itemRenderer - too much code.
Is there a simple way to add left and right padding?
The button should only be as wide as you specified when you created it as a component, unless you created the component with 100% as the width. So, try a different percent width, a fixed pixel value, or (as you said you don't want to do) using a canvas based item renderer component with a button positioned inside of it.
Well, I don't know about 'simple'... but it doesn't require a new class.
public var itemRenderer:ClassFactory ;
[...]
itemRenderer = new ClassFactory(ActionButtonItemRenderer);
itemRenderer.properties = "{width:135}";
[...]