This worked for me:
/**
* Created by JT on 8/31/2015.
*/
package UI.MobileSkins
{
import flash.events.Event;
import flash.events.SoftKeyboardEvent;
import mx.core.EventPriority;
import mx.core.mx_internal;
import mx.events.FlexEvent;
import spark.components.TextInput;
import spark.components.supportClasses.StyleableTextField;
import spark.skins.mobile.supportClasses.TextSkinBase;
use namespace mx_internal;
import mx.core.DPIClassification;
import mx.utils.Platform;
import spark.skins.mobile.TextInputSkin;
import spark.skins.mobile120.assets.TextInput_border;
import spark.skins.mobile160.assets.TextInput_border;
import spark.skins.mobile240.assets.TextInput_border;
import spark.skins.mobile320.assets.TextInput_border;
import spark.skins.mobile480.assets.TextInput_border;
import spark.skins.mobile640.assets.TextInput_border;
public class UpdatedTextInputSkin extends TextSkinBase
{
private var _isIOS:Boolean;
public function UpdatedTextInputSkin()
{
super();
_isIOS = Platform.isIOS;
switch (applicationDPI)
{
case DPIClassification.DPI_640:
{
borderClass =
spark.skins.mobile640.assets.TextInput_border;
layoutCornerEllipseSize = 48;
measuredDefaultWidth = 1200;
measuredDefaultHeight = 120;
layoutBorderSize = 3;
break;
}
case DPIClassification.DPI_480:
{
// Note provisional may need changes
borderClass =
spark.skins.mobile480.assets.TextInput_border;
layoutCornerEllipseSize = 24;
measuredDefaultWidth = 880;
measuredDefaultHeight = 60;
layoutBorderSize = 2;
break;
}
case DPIClassification.DPI_320:
{
borderClass =
spark.skins.mobile320.assets.TextInput_border;
layoutCornerEllipseSize = 24;
measuredDefaultWidth = 600;
measuredDefaultHeight = 40;
layoutBorderSize = 2;
break;
}
case DPIClassification.DPI_240:
{
borderClass =
spark.skins.mobile240.assets.TextInput_border;
layoutCornerEllipseSize = 12;
measuredDefaultWidth = 440;
measuredDefaultHeight = 35;
layoutBorderSize = 1;
break;
}
case DPIClassification.DPI_120:
{
borderClass =
spark.skins.mobile120.assets.TextInput_border;
layoutCornerEllipseSize = 6;
measuredDefaultWidth = 220;
measuredDefaultHeight = 20;
layoutBorderSize = 1;
break;
}
default:
{
borderClass =
spark.skins.mobile160.assets.TextInput_border;
layoutCornerEllipseSize = 12;
measuredDefaultWidth = 300;
measuredDefaultHeight = 24;
layoutBorderSize = 1;
break;
}
}
}
public var hostComponent:TextInput; // SkinnableComponent will
populate
/**
* @private
/**
* @private
*/
private var _isEditing:Boolean;
override protected function createChildren():void
{
super.createChildren();
textDisplay.addEventListener("editableChanged",
editableChangedHandler);
textDisplay.addEventListener(FlexEvent.VALUE_COMMIT,
valueCommitHandler);
// remove hit area improvements on iOS when editing
if (_isIOS)
{
textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING,
textDisplay_softKeyboardActivatingHandler, false,
EventPriority.DEFAULT_HANDLER);
textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE,
textDisplay_softKeyboardDeactivateHandler);
}
}
override protected function measure():void
{
super.measure();
var paddingLeft:Number = getStyle("paddingLeft");
var paddingRight:Number = getStyle("paddingRight");
var paddingTop:Number = getStyle("paddingTop");
var paddingBottom:Number = getStyle("paddingBottom");
var textHeight:Number = getStyle("fontSize") as Number;
if (textDisplay)
{
// temporarily change text for measurement
var oldText:String = textDisplay.text;
// commit styles so we can get a valid
textHeight
textDisplay.text = "Wj";
textDisplay.commitStyles();
textHeight = textDisplay.measuredTextSize.y;
textDisplay.text = oldText;
}
// width is based on maxChars (if set)
if (hostComponent && hostComponent.maxChars)
{
// Grab the fontSize and subtract 2 as the
pixel value for each character.
// This is just an approximation, but it
appears to be a reasonable one
// for most input and most font.
var characterWidth:int = Math.max(1,
(getStyle("fontSize") - 2));
measuredWidth = (characterWidth *
hostComponent.maxChars) +
paddingLeft + paddingRight +
StyleableTextField.TEXT_WIDTH_PADDING;
}
measuredHeight = paddingTop + textHeight +
paddingBottom;
}
override protected function layoutContents(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.layoutContents(unscaledWidth, unscaledHeight);
// position & size border
if (border)
{
setElementSize(border, unscaledWidth,
unscaledHeight);
setElementPosition(border, 0, 0);
}
// position & size the text
var paddingLeft:Number = getStyle("paddingLeft");
var paddingRight:Number = getStyle("paddingRight");
var paddingTop:Number = getStyle("paddingTop");
var paddingBottom:Number = getStyle("paddingBottom");
var unscaledTextWidth:Number = unscaledWidth -
paddingLeft - paddingRight;
var unscaledTextHeight:Number = unscaledHeight -
paddingTop - paddingBottom;
// default vertical positioning is centered
var textHeight:Number =
getElementPreferredHeight(textDisplay);
var textY:Number = Math.round(0.5 * (unscaledTextHeight
- textHeight)) + paddingTop;
// On iOS the TextField top and bottom edges are
bounded by the padding.
// On all other platforms, the height of the
textDisplay is
// textHeight + paddingBottom to increase hitArea on
bottom.
// Note: We don't move the Y position upwards because
TextField
// has way to set vertical positioning.
// Note: iOS is a special case due to the clear button
provided by the
// native text control used while editing.
var adjustedTextHeight:Number = (_isIOS && _isEditing)
? textHeight : textHeight + paddingBottom;
if (textDisplay)
{
// We're going to do a few tricks to try to
increase the size of our hitArea to make it
// easier for users to select text or put the
caret in a certain spot. To do that,
// rather than set textDisplay.x=paddingLeft,
we are going to set
// textDisplay.leftMargin = paddingLeft. In
addition, we're going to size the height
// of the textDisplay larger than just the size
of the text inside to increase the hitArea
// on the bottom. We'll also assign
textDisplay.rightMargin = paddingRight to increase the
// the hitArea on the right. Unfortunately,
there's no way to increase the hitArea on the top
// just yet, but these three tricks definitely
help out with regards to user experience.
// See
http://bugs.adobe.com/jira/browse/SDK-29406 and
http://bugs.adobe.com/jira/browse/SDK-29405
// set leftMargin, rightMargin to increase the
hitArea. Need to set it before calling commitStyles().
var marginChanged:Boolean =
((textDisplay.leftMargin != paddingLeft) ||
(textDisplay.rightMargin != paddingRight));
textDisplay.leftMargin = paddingLeft;
textDisplay.rightMargin = paddingRight;
// need to force a styleChanged() after setting
leftMargin, rightMargin if they
// changed values. Then we can validate the
styles through commitStyles()
if (marginChanged)
textDisplay.styleChanged(null);
textDisplay.commitStyles();
setElementSize(textDisplay, unscaledWidth,
adjustedTextHeight);
// set x=0 since we're using
textDisplay.leftMargin = paddingLeft
setElementPosition(textDisplay, 0, textY);
}
if (promptDisplay)
{
promptDisplay.commitStyles();
setElementSize(promptDisplay,
unscaledTextWidth, adjustedTextHeight);
setElementPosition(promptDisplay, paddingLeft,
textY);
}
}
/**
* @private
*/
private function editableChangedHandler(event:Event):void
{
invalidateDisplayList();
}
/**
* @private
* The text changed in some way.
*
* Dynamic fields (ie !editable) with no text measure with
width=0 and height=0.
* If the text changed, need to remeasure the text to get the
correct height so it
* will be laid out correctly.
*/
private function valueCommitHandler(event:Event):void
{
if (textDisplay && !textDisplay.editable)
invalidateDisplayList();
}
/**
* @private
*/
private function
textDisplay_softKeyboardActivatingHandler(event:SoftKeyboardEvent):void
{
if (event.isDefaultPrevented())
return;
_isEditing = true;
invalidateDisplayList();
}
/**
* @private
*/
private function
textDisplay_softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void
{
_isEditing = false;
invalidateDisplayList();
}
}
}
-----Original Message-----
From: Alex Harui [mailto:[email protected]]
Sent: Wednesday, October 21, 2015 9:40 AM
To: [email protected]
Subject: Re: Problem with prompt text in spark.skins.mobile.TextAreaSkin
Can you post a 20-line (or less) test case?
Thanks,
-Alex
On 10/21/15, 12:57 AM, "chris_d_k" <[email protected]> wrote:
>Hi,
>
>I am using TextAreas and the spark.skins.mobile.TextAreaSkin.
>
>I want to use padding to give make the TextAreas higher and still
>having the text centered vertically.
>
>When I just add the padding via css the height of the TextArea is as
>heigh as before until I enter text. The prompt text inside the text are
>is cutted.
>
>How can I fix this/ what am I doing wrong?
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Problem-with-prompt-text
>-in -spark-skins-mobile-TextAreaSkin-tp11358.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.
