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>
Related
<s:Scroller width="100%" height="100%" id="chatScroller">
<s:RichEditableText
id="mainChat"
textFlow="{TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
selectionHighlighting="always"
selectable="false"
focusedTextSelectionColor="#32EB28"
unfocusedTextSelectionColor="#32EB28"
editable="false"
lineHeight="25"
styleName="chatWin"
fontSize="10"
paddingTop="20"
paddingBottom="20"
height="100%"
width="461">
<s:TextFlow >
</s:TextFlow>
</s:RichEditableText>
</s:Scroller>
I'am updating the text variable, so for this I've added this event:
chatScroller.addEventListener(FlexEvent.UPDATE_COMPLETE, scrollBottom);
private function scrollBottom(e:FlexEvent):void {
chatScroller.verticalScrollBar.value = chatScroller.verticalScrollBar.maximum;
}
and it works, BUT the textarea firstly goes top, and then goes at the bottom, so this makes a shaking effect that happens fast, how could I avoid this and make the scroller, to scroll at bottom without going top before it goes bottom? please help can't find any solution
Add chatScroller.validateNow(); immediately after you change the text.
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 am developing a flex application which is embedded in a html file. The issue is I am not able to get the browser scroll bars, once the browser window resizes. I have tried setting overflow:scroll in the css code for html, but didn't work.
Consider an example like:
<?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="600" minHeight="400" width="100%" height="100%">
<s:BorderContainer left="30" right="30" height="120" width="100%" backgroundColor="#FFFFFF" borderVisible="true">
<s:Label x="10" y="10" fontSize="12" fontFamily="Arial" fontStyle="normal" text="PCA title"/>
</s:BorderContainer>
<s:BorderContainer left="30" right="30" top="150" height="100%" bottom="30" width="100%" backgroundColor="#000000" borderVisible="true">
</s:BorderContainer>
</s:Application>
Here if i set the absolute values for height and weight as height="768" and weight="1366", i do get the scrollbars. But i am developing the application using relative coordinates so that it works across all machines irrespective of their screen sizes. So, i cannot specify absolute value for height and weight.
Can someone help me with this as to how to get the scrollbars working without disturbing my relative coordinate system.
I'm not certain that I understand your question correctly, but I think you need SWFFit.
This is a JavaScript tool that can limit the minimum and maximum sizes of the container of your Flash object, and will force the browser to supply scrollbars when required.
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.