Skip to main content
L
lyubomir1
Participant
July 2, 2009
Answered

How to justify text in a TextInput vertically

  • July 2, 2009
  • 1 reply
  • 1404 views

So I have a simple question: how can you justify text in a TextInput vertically?

This topic has been closed for replies.
Correct answer Craig Grummitt

ah ha. well. i thought i answered all permutations of your question, but i just covered permutations of what you might have meant by 'textInput', and not what you might have meant by 'justify'. So when talking about text, justify is commonly known to mean to line up the left and right margins of the textfield. to illustrate, i've 'justified' this text box. but if its centring the text vertically that you wanted to do, i don't think this is possible with the textInput component.

The closest I can come up with in the TextInput styles is 'textPadding' which provides padding between the text and the border of the component.

I think you'd be better off, if you really did need the TextInput component to look 48 pixels tall, would be to use a regular TextInput component(22 pixels high) without a border(either through skinning or styling), and then position the component where you would like it, and draw the border yourself.

1 reply

Craig Grummitt
Craig Grummitt
Inspiring
July 3, 2009

Hmm.. the problem with short questions is there's often important information missing. But anyway, if by 'TextInput' you meant:

TextField set to 'Input Text'

Click the 'Justify' button in the paragraph section in the properties panel.

TextInput component

Is a one line component and cannot wrap text, so justifying text is meaningless.

TextArea component with editable=true

Set the align of the TextArea component's TextFormat to JUSTIFY. eg.

import flash.text.TextFormat;
import flash.text.TextFormatAlign;
var format:TextFormat = new TextFormat();
format.align=TextFormatAlign.JUSTIFY;
textArea.setStyle("textFormat", format);
L
lyubomir1Author
Participant
July 3, 2009

Yeah, sorry, I should have given more details. Basically I have a TextInput component with a height of 48 so even though it is a one line component it looks like there is a lot of space below the text. The component in question is created dynamically during run-time. So I was tasked with making the text appear in the middle (vertically) of the TextInput. Is this not possible at all? Surely there is some way to do it.

Here is the Actionscript code that creates the components:

import fl.controls.TextInput;
import flash.text.TextFormatAlign;

var gridArr:Array = new Array();
var w = 80;
var h = 48;
var rowNumber = 10;
var startX = 5;
var startY = 30;

var newTextFormat:TextFormat = new TextFormat();
newTextFormat.font = "Arial";
newTextFormat.size = 16;
newTextFormat.bold = true
newTextFormat.color = 0x1E1E1E;
newTextFormat.align = TextFormatAlign.JUSTIFY;
newTextFormat.leading = 5;

for (var i:Number = 0; i < 8; i++)
{
  gridArr = new Array();
  for (var j:Number = 0; j < rowNumber; j++)
  {
   var newCell:Cell =  new Cell();
   newCell.initialize(i, j);
   newCell.cellText.setStyle("textFormat", newTextFormat);
   newCell.cellText.width = w;
   newCell.cellText.height = h;
   newCell.x = (i*w) + startX;
   newCell.y = (j*h) + startY;
   //newCell.cellText.text = "("+newCell.gridX+","+newCell.gridY+")";
   //newCell.cellText.tabEnabled = false;
   gridArr = newCell;
  }
}

for (j = 0; j < rowNumber; j++)
{
for (i= 0; i < 8; i++)
{
  addChild(gridArr);
}
}

Craig Grummitt
Craig GrummittCorrect answer
Inspiring
July 5, 2009

ah ha. well. i thought i answered all permutations of your question, but i just covered permutations of what you might have meant by 'textInput', and not what you might have meant by 'justify'. So when talking about text, justify is commonly known to mean to line up the left and right margins of the textfield. to illustrate, i've 'justified' this text box. but if its centring the text vertically that you wanted to do, i don't think this is possible with the textInput component.

The closest I can come up with in the TextInput styles is 'textPadding' which provides padding between the text and the border of the component.

I think you'd be better off, if you really did need the TextInput component to look 48 pixels tall, would be to use a regular TextInput component(22 pixels high) without a border(either through skinning or styling), and then position the component where you would like it, and draw the border yourself.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices