I'm trying to wordwrap a textfield inside a button, however after i set wordwrap to true some unexpected behavior happened.
Button.width = 390;
Button.textField.autoSize = TextFieldAutoSize.LEFT;
Button.textField.border = true;
Button.textField.wordwrap = true;
Button.textField.multiline = true;
Button.textField.width = textButton.width - 10;
Button.textField.x = 5;
Button.height = 60;
This is what happens:
When I'm outputting the Button.textField.textWidth, it seems shown a value that so much less than Button or Button.textField.width. I just want to make the word break after textwidth meets the textField.width maximum value. Is there anything that I can do to change this behavior? …since I can't change the value of Button.textField.textWidth (read-only).
Comment out the Button.textField.autoSize setting. This is probably what is throwing everything off.
You're setting the text field's width to match the size of the button when you set width = textButton.width - 10, but you're also telling it to automatically resize the textField to match the size of the actual text when you set the autoSize setting. So it's not going to fit the button the way you want it to.
Related
I've been having trouble getting this button to work. I want it so that whenever you click it, a new text field pops up that you can type stuff in. This is supposed to be for a trivia-like game, where the user inputs their own questions and answers. Here's the code so far...
This is the text field's properties -
QuestionTextField = new TextField();
QuestionTextField.defaultTextFormat = SmallTextFormat;
QuestionTextField.textColor = 0x660000;
QuestionTextField.x = stage.stageWidth * 0.1;
QuestionTextField.y = 200;
QuestionTextField.width = stage.stageWidth * 0.8;
QuestionTextField.height = 20;
QuestionTextField.selectable = false;
QuestionTextField.type = TextFieldType.INPUT;
QuestionTextField.border = true;
QuestionTextField.multiline = true;
QuestionTextField.wordWrap = true;
And this is the function that is supposed to create a new text field every time the button is clicked-
private function AddQuestionButtonClicked(m:MouseEvent){
for(var i = Questions.length; i>=1; i--){
container_buttonsMC.addChild(QuestionTextField);
Questions.push(QuestionTextField);
QuestionTextField.y += 20
}
}
Notes : "Questions" is an array that holds the number of text fields there are, container_buttonsMC holds all of the buttons on that are on the game's main menu.
The problem is that whenever I click it, it 1. Doesn't actually create a new text field, but instead moves it a certain amount of pixels down, and 2. It sort of duplicates the text field's position...if that makes ANY sense at all. If I click on the button once, it will move the text field down by 20 pixels. If I click on it again, it will move it down by 40 pixels, then by 80, and so on...
I also traced the length of the array, and surprisingly enough, the number that appeared would double every time I clicked it. However, only one text field is visible (apparently). It probably has something to do with the for loop's action, but I don't know for sure. Does anyone have an idea as to what the problem is? (Thanks in advance, I'm still new to AS3 and programming in general)
First, each need to create a new textfield every time you click the button, rather than adding it to the stage. With what you have at the moment, you only created one text field.
Secondly, you only want to do add one more text field, right? So instead of using a loop, which will create multiple new text fields, just create one extra text field and add it to the list.
The code will look something like
private function AddQuestionButtonClicked(m:MouseEvent){
var QuestionTextField:TextField = new TextField()
QuestionTextField.defaultTextFormat = SmallTextFormat;
QuestionTextField.textColor = 0x660000;
QuestionTextField.x = stage.stageWidth * 0.1;
QuestionTextField.y = 200;
QuestionTextField.width = stage.stageWidth * 0.8;
QuestionTextField.height = 20;
QuestionTextField.selectable = false;
QuestionTextField.type = TextFieldType.INPUT;
QuestionTextField.border = true;
QuestionTextField.multiline = true;
QuestionTextField.wordWrap = true;
// You can adjust the 50 here to control the spacing between text fields
QuestionTextField.y += 50 * Questions.length
container_buttonsMC.addChild(QuestionTextField);
Questions.push(QuestionTextField);
}
if(anchorWidthFlag)
{
popUp.popUpWidthMatchesAnchorWidth = false;
popUp.explicitWidth = anchorWidth;
}
here AnchorWidthFlag = true and anchorWidth = 350;
i tried this way
1) popUpWidthMatchesAnchorWidth = false
2) explicitWidth = anchorWidth //350
but not get appropriate output.
I want to set minWidth and maxWidth to anchor popup, can anyone help me?
Try to set popUpWidthMatchesAnchorWidth to false and set minWidth and maxWidth on dropDown group. If I understood what you want, it would work.
Setting minWidth/maxWidth on popupAnchor woudn't make any effect due to the fact, that popup is not a child of popupAnchor. So standard flex measuring steps wouldn't work here. Though popup doesn't know parent minWidth/maxWidth. If you open the source code of PopUpAnchor you will see that if popUpWidthMatchesAnchorWidth is true the size of popup is set to explicit size of the popupAnchor, but there is no code about minWidth/maxWidth. If you really need to set these sizes on PopUpAnchor you would extend PopUpAnchor class and implement this functionality.
I want to create a textfield extension that:
When width is set, automatically resize height by the content of text. Easy done by autosize left, word wrap true, multiline true.
When height is set, automatically resize width by the content of text. Here is my problem.
When both width and height set aren't a case I am interested in.
I've tried several things off the internet, I am stumped.
General solution is impossible, as if the text field contains too many newlines to display within a given height, no matter what width you assign, the text field will be unable to display all the lines. Partial solution is presented by greetification, but it lacks some features one should be aware of. First, no matter what you do, you should not set height to value less than font height, or the text field will not be able to display a single line. Second, if wordWrap is set to false, and multiline to true, the resultant textWidth is the largest desirable width for your text field, so if you adjust the width like greetification advises, stop once you reach the recorded textWidth, as further increases are pointless.
function setHeight(newHeight:Number):void {
var tw:Number;
var th:Number;
if (myTextField.wordwrap) {
myTextField.wordwrap=false;
tw=myTextField.textWidth;
th=myTextField.textHeight;
myTextField.wordwrap=true;
} else {
tw=myTextField.textWidth;
th=myTextField.textHeight;
}
if (newHeight<th) newHeight=th+2; // as below
myTextField.height = newHeight;
while((myTextField.textHeight > myTextField.height)&&(myTextField.width<tw)) {
myTextField.width += 100;
}
if (myTextField.width>tw) myTextField.width=tw+2; // "2" depends on text format
// and other properties, so either play with it or assume a number big enough
}
Not the most elegant solution, but it should work:
function setHeight(newHeight:Number):void {
myTextField.height = newHeight;
while(myTextField.textHeight > myTextField.height) {
myTextField.width += 100;
}
}
I want to get radioButton's label height in as3.
I have 5 radio buttons in my radioButton group. One of those radioButtons has a three line label, another has a single line etc...
When I try to access the radioButton.height, I always get same value regardless of the label height.
I need to know the height of the label, so I can set the radioButton y coordinate accordingly.
can I change the radioButton's label height?
spacing = 30;
rb.label = tempQQString //from xml. long or short string anyone
rb.group = myGroup;
rb.value = i + 1;
rb.x = answerX;
rb.y = questionField.height + (questionY+20) + (i * spacing); // here use rb.height or rb.textField.height
trace("rb height**" + rb.height) // always get velue 22;
addChild(rb);
RadioButton and any fl control that extends labelButton (all the ones that have a label), expose the actual text field with the .textField property.
So for your example, instead of using rb.height, you would use rb.textField.height to get the height of just the label portion of the control.
You can also set properties on the textField as well.
rb.textField.background = true;
rb.textField.backgroundColor = 0xDDDDDD;
rb.textField.multiline = true;
rb.textField.wordWrap = true;
rb.textField.autoSize = TextFieldAutoSize.LEFT;
now, for your scenario, you may be better off just using the radio button's bounds instead, as it will be the REAL height of the object.
rb.getBounds(rb).height; //this will be the true height of the component.
If your label was one line and your icon was taller than your label, you could potentially be getting a value from rb.textField.height that is smaller than the real height of the radio button.
Try this.
for(var i=0;i<rb.numChildren;i++){
if(rb.getChildAt(i) is TextField){
var txt:TextField = rb.getChildAt(i) as TextField;
trace(txt.height+":"+rb.height);//traces the height of text field and radio button
}
}
I need to realize textbox autoresizing in actionscript3(IDE - adobe flash pro cs3). For example my textarea is in width 100 px, user has been wrote in it something, that is bigger than 100 px, then my textbox should become increasingly. any ideas?
Also I can't realize multiline option: when the text goes beyond the textbox, it starts to scroll. In line type I've chosen 'multiline'.
thanks
try this:
textfield.autoSize = "left";
textfield.multiline = true;
textfield.wordWrap = true;
Hope it helps,
Rob
If you want to resize textfield automaticaly you can use textfield.autoSize property.
Wnen you are using multiline textfield, then setting
textfield.autoSize = TextFieldAutoSize.LEFT;
will align text to left and resize field vertically. If you use single line text field, it will resize to the right.
The TextField's .autosize property is great for sizing dynamic text fields when you already know the text string (but mind the .multiline and .wordwrap properties), but won't be helpful for input text fields.
For input text, I'd suggest listening for the Event.CHANGE event, then updating the width/height based on the number of lines, the .textWidth, or TextLineMetrics info (e.g. myTextField.getLineMetrics).
Here's a quick example:
var myField:TextField = new TextField();
myField.x = 10;
myField.y = 10;
myField.width = 100;
myField.height = 20;
myField.border = true;
myField.type = TextFieldType.INPUT;
myField.addEventListener(Event.CHANGE, textChangeHandler);
addChild(myField);
function textChangeHandler(evt:Event) {
var buffer:Number = 10;
myField.width = Math.max(100, (myField.textWidth + buffer));
myField.scrollH = 0;
}
Edit: Oh, and if you want that to work with .multiline, then just add:
myField.multiline = true;
and in the textChangeHandler function add:
myField.height = myField.textHeight + buffer;