I'm looking to add a specialized border around some dynamic text.
A special type of border that filters just can not produce
So I need this border to match the length of the dynamic text.
Unfortunately this code is not working
thistext.autoSize = TextFieldAutoSize.LEFT;
border.width = thistext.width;
What happens is, the border width is set to the initial starting width of the text and is not changed as the width of the text changes
Any ideas on how I can make this work?
You should rather listen only to text changes : flash.events.Event.CHANGE, instead of checking every frame.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.html#event:change
Besides, you may use textWidth attribute to get actual text width, no matter the value of autosize attribute (Width must be set to the maximum width). I'm not a huge fan of auto size feature which hides the maximum width, although it exists internally ( equal to the width attribute of the textfield, BEFORE setting autosize..). I'd rather have a less "magical" but more clear behavior, but it's debatable, especially if your text has to interact with the mouse (click,hover..), then you can take advantage of the bounds being automatically updated
I actually caught my mistake.
I need to add the code into an event listener that checks every frame AFTER the dynamic change so this code works
border.width = thistext.width;
Related
Hello.
Is there any way to discover how big is vertical offset in text field(red line, place beetween begining of text field and start of text). Can I also change it ?
Thank you for advice
There is no way to measure this distance. Maybe TextLineMetrix can help you little. Check this document:
textLineMetrics reference
Also you can use textHeight property of text field.
you can trace a comparison between the property textHeight and textField.height that may tell you the difference.
if you want to adjust it manually a work around may be in order such as creating a Sprite that holds the graphics of your box, or border like you have displayed, then imposing a textField on that which you can place by its coordinates.
Sorry for the bad title. Couldn't think of a better one...
I'm doing a software that is configurable with loaded data from XML.
User can define the max "width" of an TextField and the TextFields are multiline and wrapping happens when the text wouldn't fit the width. Text for the TextFields is also loaded from the XML file and the length is arbitrary.
Because TextField doesn't have neither buttonMode or useHandCursor properties I made TextFields children of sprites. So for every TextField there is a sprite as a parent.
Then the real problem:
("TextFields" are actually the sprites with a TextField as a child)
The "TextFields" should not be clickable outside of the text in them. At the moment it seems like that the sprites extend to the full width of the TextFields and therefore user can actually click the "TextFields" from an area where there is no text.
I "tried" to change the size of the sprite, checked the AS3 reference and now I know why everything disappeared after that.
So I need a solution in which, the "TextFields" have buttomMode and useHandCursor enabled and the container should be able to cut off the area where there is no text.
The TextField object has some default sizing characteristics. You need to apply one of these:
TextFieldAutoSize
to this property:
TextField.autoSize
to get it to form fit your text. Then by adding it into an empty Sprite, said Sprite will also be the exact size of your text.
Changing the size of the Sprite is the wrong approach as what you're actually doing in that case is scaling its interior content. Sprites automatically size themselves to fit the objects they contain. As long as you deal with making sure the TextField is sized properly, the parent Sprite will be sized properly as well.
Im sure you dont need it anymore but someone may do, so here it is.
As you have a sprite as parent them you can make him to desable the mouseChildren.
yourSprite.tf.text = 'something';
yourSprite.buttonMode = true;
yourSprite.mouseChildren = false;
I've written a function which takes a <select> ID, and replaces all the options with new ones (using jQuery's html()). However, on IE the width of the dropdown remains the original one which has a size way bigger than what I need to display, because is based on the original <option>'s that had long strings captions.
Is there a way to force the <select> to recalculate it's width?
I am using IE 8.
I think the pragmatic solution would be to replace the whole <select> element. This way, the newly inserted one will have the correct width for its <option> elements (disregarding any other styling that may be applied).
The thing to bear in mind if replacing the whole select is that any references to the replaced element will need to cleaned up prior to removing it from the DOM (to avoid any potential memory leaks) and event handlers attached to the newly inserted element.
It's possible to set its width through css.
In your case I would approach it using this method:
If you are using em's or ex's as font size units, then since it is a value based on height, you can assume using a certain ratio that it is almost near the equivalent of a character's width. Based on that, you can actually calculate how wide your select element would be by:
1st: get the number of characters of the smallest string from the select options.
2nd: multiply that by the em value.
3rd: set this value as the select's width.
using jquery that would be achieved through:
var em = 1em; //assign here a value, that corresponds to your layout's font size
var shortest = 6500;
$('mySelect').each(function(i, selected){
temp = $(selected).text().length();
shortest = (temp < shortest) ? temp : shortest;
});
$('mySelect').css('width',(shortest*em + 1) + 'em'); //add 1em for the scrollbar
In actionscript 3, my TextField has :
CSS styling
embedded fonts
textAlign : CENTER
autoSize : CENTER
... when italics are used the very right character gets slightly cut off (specially caps).
It basically seems that it fails detecting the right size.
I've had this problem before but just wondered is there a nice workaround (instead of checking textWidth or offsetting text etc.)?
Initialize your textField as you always do, using multiline, autosize, htmlText...
Then do this little trick :
// saving wanted width and height plus 1px to get some space for last char
var savedWidth = myTextField.width + 1;
var savedHeight = myTextField.height + 1;
// removing autoSize, wich is the origin of the problem i think
myTextField.autoSize = "none";
// now manually autoSizing the textField with saved values
myTextField.width = savedWidth;
myTextField.height = savedHeight;
Not that it is much comfort to you, but Flash sometimes has trouble with this seemingly simple task. CSS styling of html TextField was a nice addition but it has caused headaches for text-rendering. In fact I very rarely use CSS for styling text for that reason. I can only imagine that combining bold, italic and normal type faces within the HTML causes Flash to get some of the width calculations wrong which causes autoSize to set the mask a tiny bit short. I hope very much that the new text rendering engine in Flash Player 10 will finally fix these issues (it certainly looks better in theory).
So my solution is never to use HTML with the exception being when I require <a> links in my text ... and there are even some tricky text shifting issues there. In those cases I avoid mixing different font weights and font styles within the same text field. All other cases I use TextFormat directly on TextField.
I suppose if you can't get out of your current architecture (for some reason) you could try adding to the end of your html encoded strings. Or you could manually set the width of the field and not rely on autoSize (as you have mentioned). But if you keep on the CSS/HTML route you may find another new and painful limitation just when you don't want it.
I've had issues with TextField masks behaving differently in the Flash preview, and in the actual browser plugin. Usually, and this is strange to me, it would appear more correctly in the browser. Have you tried running the swf in a browser to see if the problem is actually an annoyance rather than a permanent problem?
I had said this:
My in-ideal approach to solving this is to attach a change event to the TextField which always adds a space after the last character of the field. And then to remember to trim this space off when using the value.
But that didn't take into account that this probably doesn't have a change event and that it's an HTML rendered text field. To add a trailing space in the HTML text field throw in an again, that's not really fixing the problem.
In my flex application I have scenerio like this:
parent to child
Vbox->Canvas->Sprite->Textflow
In this scenerio now I need to have dynamic height of the textflow & its parents. Here the root parent is the itemrenderer of the datagrid I have.
I need the heights of rows to be adjust according the content in it.
Right now I am importing the xml to textflow, then getting the number of lines, text height. Then removing the textflow & adding it again with the measured height according to the number of lines & text height.
How can I achieve it without removing & adding it again, coz it is taking much time in updating?
Thanks in advance.
Right might be a little late to answer this but someone else may benefit.
On the canvas or display object housing the TextFlow and sprite add a creationComplete functon.
I don't know if this step is necessary, but it works for me. Add a label with the text thats going to go into TextFlow (with the same font and fontSize), add a creation complete listener to that as well.
Get the height and width from the newly created label e.target.width e.target.height (in the function listening to the creation of label). Set the displayObjects (in the above case Canvas) height and width to these values, then proceed to add the sprite and textflow.
Note: this was a lazy way for me, label uses measureText which would be a more efficent way of doing this.