We are having answer options to a questions is set as label to the RadioButton. When answer is more than one line's length it is being truncated and followed with ... which in hovering shows the complete answer as tooltip.
We want to wrap the answer in multiple lines instead of truncating. How can we do it?
The code is:
...
a1.label = answers[_index].atext;
a1.id = answers[_index].cans+ "_" + answers[_index].id;
...
<s:VGroup id="Answers" left="145" bottom="193" width="725" height="372"
chromeColor="#F7F9FB" gap="20" horizontalCenter="8" verticalCenter="46" click="enablenext();">
<s:RadioButton id="a1" x="568" y="346" width="500" height="60" click="enablenext();"
fontFamily="Arial" fontSize="16"/>
<s:RadioButton id="a2" x="1068" y="346" width="500" height="60" click="enablenext();"
fontFamily="Arial" fontSize="16"/>
<s:RadioButton id="a3" x="437" y="305" width="500" height="60" click="enablenext();"
fontFamily="Arial" fontSize="16"/>
<s:RadioButton id="a4" width="500" height="60" fontFamily="Arial" fontSize="16"/>
</s:VGroup>
The display sample is:
=================================================================
UPDATE 1:
Used the control shared in the link to implement MultilineRadioButton.
But the problem now is line length is two less how to increase to around 500 pixels?
Current screenshot:
======================================================================
Update 2
I created a custom skin using RadioButton class
Applied the skin in styles section to RadioButton
First I deleted maxDisplayedLines under Label. Not working. Then I set its value to 3. Still not working....
In skin for label added lineBreak first to explicit then toFit.... to no result still getting tooltip for longer sentences.
Update 3
I created a new project with only RadioButton and Button to add text to radioButton. It was working fine.... so it goes worse...
Finally solved the issue.
It seems the skin has to applied in mxml containing application even if the control is going to be used in mxml with Group in it.
Solved this issue with the help of my co-workers.
Related
I observed when we use VGroup in the HDividedBox dragging is not completely moving to the left side.The components in the VGroup are still appearing when we drag the hdivider completely.But when we use VBox in the HDividedBox dragging is working perfectly.
Here is sample code
<mx:HDividedBox id="hdivbox" width="100%" height="100%" liveDragging="true">
<s:VGroup width="50%" height="100%" >
<s:ComboBox/>
<s:ComboBox/>
</s:VGroup>
<s:VGroup width="50%" height="100%" >
<s:Panel width="100%" height="100%"/>
</s:VGroup>
</mx:HDividedBox>
Now when we drag divider completely to the left side first combobox is visible but when i replace the same code with VBox dragging is working fine. Can any one help me on how to fix this without using VBox
It took me some time to understand why this happens, but it was really interesting, so thank you for a question. If you just need to fix it use clipAndEnableScrolling="true"in first VGroup.
The problem is that in VBoxproperty clipContent defaults to true, but in VGroupalmost the same property clipAndEnableScrolling dafaults to false. This cause this different behavior.
I have a weird thing going on with my skins. I'm hoping to fix it by doing a workaround that involves triggering the click of a sparks buttonbar button, but I'm not exactly sure how to do that.
Here's my button bar code
<s:ButtonBar id="tabs" dataProvider="{vs}"
skinClass="skins.hatchedbuttonbarskins.TabBarSkin"
depth="100" width="80%" visible="true"
bottom="0" horizontalCenter="0" height="25" />
<mx:ViewStack id="vs" width="95%" height="625"
borderVisible="true" horizontalCenter="0">
<s:NavigatorContent width="80%" height="100%"
label="My Label"
skinClass="skins.lg.TabNavigatorContent">
<lists:ListCenter myLists="{this}" myButtons="{tabs}"/>
</s:NavigatorContent>
...
There are three more navigatorcontent objects after this one.
In ListCenter.mxml, I want to trigger a click of the tabs button bar buttons. Here's the action script call I'm making.
myButtons[1].dispatchEvent(new MouseEvent(MouseEvent.CLICK));
It's giving me the following error:
Error #1069: Property 1 not found on spark.components.ButtonBar and there is no default value.
How do I access the button objects?
I'm not sure what you are trying to achieve, but you can try to change the ButtonBar.selectedIndex like this:
myButtons.selectedIndex = 1;
If you really want to access buttons, then use:
var btnBarBtn:ButtonBarButton = myButtons.dataGroup.getElementAt(0) as ButtonBarButton;
Or you can describe your skin problem, maybe there is another way to solve it.
I have a rich text component with large amount of text. How to add vertical scrollbar to it?
I tried:
<mx:Canvas width="100%" height="100%" verticalScrollBar="vsb">
<s:RichText id="text" width="100%" height="100%" maxDisplayedLines="-1"/>
</mx:Canvas>
<s:VScrollBar id="vsb" height="100%"/>
But it get error: Initializer for 'verticalScrollBar': values of type mx.controls.scrollClasses.ScrollBar cannot be represented in text.
Reading the docs on RichText, I see this:
For performance reasons, it does not
support scrolling, selection, editing,
clickable hyperlinks, or images loaded
from URLs. If you need those
capabilities, please see the
RichEditableText class.
So, going with a RichEditableText (and setting its editable property to false, this works for me with FlashBuilder 4.5. Note: I set the Scroller height to 200 and added lots of text to force a scrollbar to appear)
<mx:Canvas width="100%" height="100%">
<s:Scroller width="100%" height="200">
<s:RichEditableText percentWidth="100" percentHeight="100" editable="false">
<!-- add lots of text here to introduce a scrollbar -->
</s:RichEditableText>
</s:Scroller>
</mx:Canvas>
I load an image from a url and add it to the stage.
I need a way to add some text to the image before loading it to the stage !
NOTE: add text over the image after it has been loaded
thanks in advance.
NOTE:
Image type mx : Image
You could just use a composite component then.
Any with absolute positioning should do.
Just make sure to add the label as the last subcomponent.
For example:
<mx:Canvas width="100" height="100">
<mx:Image source="http://www.gravatar.com/avatar/" width="100%" height="100%"/>
<s:Label text="This is your text"/>
</mx:Canvas>
Here is my problem, fairly obvious: [img at bottom]
The problem, as you can see, is that the text (height and width) is nothing like the Height and Width of the compoent (Spark TextArea) that I have set via the Main.mxml file in Flex 4. This is pissing me off so much because nobody can tell me why this is happening, or how to fix it. Text is dynamically added to the TextArea as people send messages in the server, hence the valueCommit line.
I don't understand this, because I know it's not the fault of my fx:Script. I know this, because when I switch over to the Design tab of Adobe Flex Builder 4; the lines are just as messed up as in the screen shot.
I've been tearing my hair out (metaphorically) over this issue, please help me come to an answer.
<!-- State: interface -->
<s:TextArea id="incomingMessages" includeIn="interface"
heightInLines="{NaN}" widthInChars="{NaN}"
y="10" x="9" minWidth="426" minHeight="442"
text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
valueCommit="incomingMessages_valueCommitHandler(event)"/>
<!-- Toolbar -->
<s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
<mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
<s:Label id="curname" height="22" width="100" text="<user>" fontSize="16" includeIn="interface"/>
<s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
<s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = "";"/>
</s:HGroup>
<!-- end Toolbar -->
<s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
<s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
<s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
<s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->
Here is the FX:SCRIPT for incomingMessages_valueCommitHandler(event) if you care:
protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
if (scrollToggle.selected)
incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}
I'm not allowed to post images [less than 10 repute] so here is a link: Image Link
Edited to include the surrounding code as asked for. What you all don't seem to understand is that the text box is taking up the size I set it to, but the TEXT inside the text box is only taking up like 100px wide and high of the total text box area, please check the picture link.
Okay so, we found the problem, graphite.styles.TextAreaSkin ... WHAT WAS ADOBE SMOKING?
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
<s:RichEditableText id="textDisplay"
lineBreak="toFit"
textAlign="left"
selectable="true"
verticalAlign="top"
paddingBottom="4"
paddingTop="4"
paddingLeft="4"
paddingRight="4"
height="125"
width="125"
maxWidth="125"
maxHeight="125"/>
</s:Scroller>
What type of component is the parent to your TextArea? Without knowing any of the surrounding mxml, you may want to set width and height to 100%. If that doesn't work, post some more of your mxml and we'll try to figure it out. Hope that helps.
As you said, this is a problem with the graphite textarea skin. I created a new skinClass for my textarea(based on graphite text area skin). and replaced the scroller and richeditabletext with the Spark text area ones. And added textAlign = "left". And it started working fine. Let me know if this helped. Thanks.