I have a Flex spark Label component with properties width=125 and maxDisplayedLines=1. This successfully truncates the text when it is too long to display, however if brackets are involved then the text is truncated in a way I do not want.
For example I set the text to "You (chinchiheather)" and it displays "You(..." never displaying any part of the text in brackets unless it can display all of it. I would prefer "You (chinchi..." than what I am being given. Is there some property I can set so that brackets are not treated specially, or does anyone know of some other way around this?
Thanks :)
The Label has a lineBreak style that you can use to control word wrapping. It also seems to apply to truncation. If you set the lineBreak style equal to "explicit", the text be truncated at the point it no longer fits, and not after an open parentheses.
The default value is for this style is "toFit".
<s:Label lineBreak="explicit" />
Or
var label:Label = new Label();
label.setStyle("lineBreak", "explicit");
Related
Help, I'm stuck with trying to limit text to the width of the actual field. Normally I would only need to set the max-length property but it doesn't work in for this scenario. I need something very similar to how Adobe handles multi-line textboxes...the line ends at the width of the text box and doesn't wrap. You must hit the return key to go to the next line.
I've searched around but really can't find anything specific.
Just wondering if anyone has any ways of adding paragraph spacing visuals to text inside a textarea via CSS, or even JS?
I'm aware of line-height but would like to add the impression of spacing before/after paragraphs themselves inside of a textarea, instead of having to hit enter twice inside the textarea to get a space between paragraphs.
Is this possible with a textarea alone or do I need to consider rich text editors, or maybe even writing a simple text editor myself with paragraph spacing? (I'd rather not go this route as I am merely after paragraph spacing, not all the additional formatting options that comes with text editors)
Nope. Without the line-spacing property you cannot add space between paragraphs in a textarea without altering the value of the area. This is not something that JavaScript or CSS selectors can do.
Yes, it should be possible with JavaScript by replacing the value of the textarea while listening for keyboard event values, specifically for the Enter key.
You store the value in a variable, and whenever a user hits enter (its event value is 13), it takes that text and adds a new line to the end. Now that becomes the value stored in the variable, and a new line is added the next time the user hits enter, and so on.
Here's an easy implementation if you're already using jQuery:
$('#my-text').keypress(function(e) {
if(e.which === 13) {
var text = $('#my-text').val();
$('#my-text').val(text + '\n');
}
});
e is the keyboard event passed in as a parameter, and when that happens to be an enter key, the code stores the text value and then replaces the value of the textarea with that value plus a new line.
Here's a demo on codepen:
http://codepen.io/denmch/pen/qNyjZE
Alright, So I have an issue that is a bit weird. I am using a RichTextEditor and have allowed the user to re-size it. All the controls have been stripped away to a main toolbar such that the RichTextEditor just looks like a box with text in it. I have an issue where when I save the htmltext generated by the editor and then re-render it later it always adds an extra line break at the end of the text. I've found that this is due to the paragraph tag, and since I want the user to be able to align text I have to keep it. Does anyone know how to strip this last line break without stripping all the formatting?
I hacked a fix for this, basically involves stripping the last closing paragraph tag </P>. RichTextEditor is ugly :(
This is absolutely a bug, and it is triggered by setting the "htmlText" property instead of the "text" property. This occurs whether you assign it in code, or cause the designer to set "htmlText" instead of "text" by checking the "render as html" button in the properties for the text field. Also of note, this only occurs on "input" type TextFields. And if you start with a "dynamic" type textfield and subsequently set "type" to "input" (also have to set "selectable" to true or cursor will be invisible (another bug)), you will see the extra line appear right in front of your eyes. Again, this does not effect dynamic text fields, just those in input mode.
Despite the fact that the htmlText property is identical in both cases whether you assign a string like "Hello" to text or htmlText (the htmlText value generated is identical for either), the extra line only appears when setting the htmlText property.
Specifically, it occurs when you set htmlText to a string that actually contains html paragraph tags. If you just assign htmlText some text like "Hello", the problem will not occur. On the other hand, if you assigned htmlText <p>Hello</p> or you assigned htmlText to itself (which you need to do to preserve the html and force the internal metrics to update immediately), then the problem occurs. Someone mentioned, if you omit the closing </p> tag, the problem won't occur, and that's true. It's also true that assigning something like <a>Hello</a> won't trigger the problem.
So in summary, this problem occurs only when one sets the htmlText property of an auto-sized, multiline, input type text field to a value that contains <p></p> tags. It does not occur with dynamic text fields, nor does it occur on input text fields that are not autosized, nor does it occur on those who are autosized but not assigned <p> tags to htmlText.
To reproduce this problem, set up a text field in the designer and make sure the background and outline is turned on so you can see the size of the field, then it will be a single line high (multiline text field) as expected (assuming it's wide enough). If you then go to the code and set txtfld.htmlText = txtfld.htmlText (set it to itself), this mere assignment of htmlText property (to it's own same value) causes an additional line to be added. And the value of htmlText is in fact the same, it hasn't actually snuck in an extra <p> tag or anything... it just displays this trailing return that shouldn't be there. As expected, the same thing occurs when you check "render as html" in Flash properties for the text field, which seems to cause it to set htmlText instead of text, and causes the problem to appear.
It's unlikely that there are actually two rendering modes, since it technically always renders htmlText (i.e. htmlText always has a value, and you could always set the text format of some segment of the text with setTextFormat, which was originally assigned with "text", and that doesn't trigger some kind of switch to "html rendering mode" or anything like that.
The behavior seems to strictly come as a result of assigning htmlText property.
The only way to avoid it (aside from setting htmlText, reading back the value, stripping the last </p> tag off, and reassigning it), is to just initialize all your text fields as plain "text", and then manually apply the formatting through calls to setTextFormat( TextFormat, beginIndex, endIndex).
The true catastophe of this bug, as mentioned in the original problem post, is that you cannot save and restore the htmlText value of a TextField, because setting htmlText to a string containing html (specifically the p tag), causes this extra line to be added, compounded by the fact that if you specifically want the textfield to be sized right, you'll probably have autosize turned on, and that's specifically when this problem creeps up and ensures the size is NOT right.
I had a similar headache with flex html text components. Flex does not have proper support for many html cases. You'll see extra padding for <p> and <li> all the time. Heck, there isn't even support for the <ul> tag. If there is a line break in a normal text, flex appends extra padding at the end of the tags and removing this line break will remove the extra padding.
However, you might want to use something like this: http://code.google.com/p/flex-htmlfilter/
I've got a problem with textarea's in Google Chrome. I'm using classic ASP, but this is unimportant as Chrome is actually posting the data incorrectly.
The problem is with a text area. As soon as a string of text is too long to fit one line of the text area, it wraps to the next line (as it should).
My problem is that when submitted, the form data contains a CarriageReturn & LineFeed at every spot where the text wrapped, as well as user generated enter/return events - I can't even tell the difference between the two.
Does anyone know how to fix this? Possibly an option in the text area or something? All other browsers only add CarriageReturns and LineFeeds where the end user has actually put them in.
This should only happen if you set the wrap="hard" attribute on the textarea.
Do you have wrap="hard" set on the textarea ? If so, remove it. If not, can you try setting wrap="soft" as attribute?
in AS3, I'm making this dynamic textfield that is populated from an XML file based on where the user clicks.
The dynamic textfield has a custom scrollbar to it. My problem is that if the text inserted into the textfield is less than the previously displayed text, you can still scroll the dynamic textfield as far as the previous one.
Is there a way to reset the textfield autoSize?
Many thanks,
If you are talking about Flash ( I have very little experience in Flex ) then the textField.autosize property would probably get you in the right direction.
I think this link will tell you exactly what to do.
Are you using any of the standard flex controls? Or, is this flash?
You can set the width of the field to the string length + some space (by binding the width to the string's length/event handling etc). This may be of interest. Of course,
Try this, wrap the xml elements text in
<text><![CDATA[<span class="someClass">Some Text Here</span>]]></text>
If the prior wasn't wrapped in CDATA, flash would have taken the <span class="someClass"> and attempted to drop it down a line and indent it as you would with XML hierarchy; CDATA tells flash to ignore those characters and literally treat them as a string. The result of not using this process is that there are many odd spacings in your textfield.
Also be sure that your TextField is set to Multiline and wordwrap, as well as autoSize such as TextFieldAutoSize.LEFT;