You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Fréderic Cox <co...@gmail.com> on 2014/07/29 12:32:43 UTC
Problems with vertical alignment of Textinput on iOS
Hi,
I've just restarted a one year old project for iOS (iPad). I updated to
Apache Flex 13 using AIR 14 and notice some small issues. One of them is
related to textinput.
I define my textinput in CSS:
TextInput{
font-family:"Helvetica";
background-color:#eeeeee;
background-alpha:1;
border-color:NaN;
border-style:none;
font-size:25;
color:#000000;
vertical-align:middle;
}
And in MXML:
<s:VGroup width="100%" height="100%" top="130" gap="30" verticalAlign="top"
horizontalAlign="center">
<s:HGroup id="firstnameHolder" verticalAlign="middle">
<s:Label text="Voornaam" styleName="inputStyledLabelField" width="150" />
<s:TextInput id="firstnameInput" width="300" height="50"
softKeyboardType="default"
autoCapitalize="word" verticalCenter="0"
change="firstnameInput_textChangedHandler(event)"
enter="firstnameInput_enterHandler(event)"
focusOut="firstnameInput_textValidatedHandler(event)" />
</s:HGroup>
<s:HGroup id="lastnameHolder" verticalAlign="middle">
<s:Label text="Achternaam" styleName="inputStyledLabelField" width="150"
/>
<s:TextInput id="lastnameInput" width="300" height="50"
softKeyboardType="default"
autoCapitalize="word" verticalCenter="0"
change="lastnameInput_textChangedHandler(event)"
enter="lastnameInput_enterHandler(event)"
focusOut="lastnameInput_textValidatedHandler(event)" />
</s:HGroup>
<s:HGroup id="emailHolder" verticalAlign="middle">
<s:Label text="E-Mail" styleName="inputStyledLabelField" width="150" />
<s:TextInput id="emailInput" width="300" height="50" verticalCenter="0"
softKeyboardType="email" change="emailInput_textChangedHandler(event)"
enter="emailInput_enterHandler(event)"
focusOut="emailInput_textValidatedHandler(event)" />
</s:HGroup>
</s:VGroup>
But you can see in the screenshot below that text is not aligned vertically
in the middle. The cross to delete the value is positioned correctly but the
text itself is not. On the AIR simulator positioning for the text is
correct. Is this a known bug? Is it related to Apache Flex or AIR? Any
workarounds? This is blocking the release of my app
<http://apache-flex-users.2333346.n4.nabble.com/file/n7417/IMG_0297.png>
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Problems with vertical alignment of Textinput on iOS
Posted by Fréderic Cox <co...@gmail.com>.
https://bugbase.adobe.com/index.cfm?event=bug&id=3796371
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p7426.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Problems with vertical alignment of Textinput on iOS
Posted by Fréderic Cox <co...@gmail.com>.
skinClass="spark.skins.mobile.TextInputSkin" fixes this issue but then
autoCapitalize does not work.
Is it sure to be a AIR issue or can it also be a Apache Flex issue? If it is
an AIR issue I will report it as a bug
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p7425.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Problems with vertical alignment of Textinput on iOS
Posted by João Fernandes <jo...@gmail.com>.
https://bugbase.adobe.com/ here
On 29 July 2014 14:19, Fréderic Cox <co...@gmail.com> wrote:
> Working fine in AIR3.8 with Flex 4.13.0 so this seems to be an AIR bug.
> Where
> should I file this?
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p7421.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
--
João Fernandes
Re: Problems with vertical alignment of Textinput on iOS
Posted by Fréderic Cox <co...@gmail.com>.
Working fine in AIR3.8 with Flex 4.13.0 so this seems to be an AIR bug. Where
should I file this?
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p7421.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Problems with vertical alignment of Textinput on iOS
Posted by Fréderic Cox <co...@gmail.com>.
I'm trying out different combinations to determine if this is a Flex or AIR
bug
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p7420.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Problems with vertical alignment of Textinput on iOS
Posted by Tonic <an...@hotmail.fr>.
It seems this problem is not resolved.
To fix this problem, I override the layoutContent function in skin
ScrollingStageTextInputSkin, and add the half of font size :
[CODE]
override protected function layoutContents(unscaledWidth:Number,
unscaledHeight:Number):void
{
// base class handles border position & size
super.layoutContents(unscaledWidth, unscaledHeight);
// 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 = Math.max(0, unscaledWidth - paddingLeft -
paddingRight);
var unscaledTextHeight:Number = Math.max(0, unscaledHeight - paddingTop -
paddingBottom);
var fontSize : Number = getStyle('fontSize');
if(isNaN(fontSize))
fontSize = 0;
// default vertical positioning is centered
var textHeight:Number = getElementPreferredHeight(textDisplay);
var textY:Number = Math.round(0.5 * (unscaledTextHeight - textHeight)) +
paddingTop - (fontSize/2);
if (textDisplay)
{
textDisplay.commitStyles();
setElementSize(textDisplay, unscaledTextWidth, unscaledTextHeight);
setElementPosition(textDisplay, paddingLeft, textY);
}
if (promptDisplay)
{
if (promptDisplay is StyleableTextField)
StyleableTextField(promptDisplay).commitStyles();
var promptHeight:Number = getElementPreferredHeight(promptDisplay);
var promptY:Number = Math.round(0.5 * (unscaledTextHeight -
promptHeight)) + paddingTop;
setElementSize(promptDisplay, unscaledTextWidth, promptHeight);
setElementPosition(promptDisplay, paddingLeft, promptY);
}
}
[/CODE]
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p8742.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Problems with vertical alignment of Textinput on iOS
Posted by Neverbirth <ne...@gmail.com>.
You're right, got confused when saw your verticalAlign style set.
Have you tried latest AIR Beta? http://labs.adobe.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p7429.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Problems with vertical alignment of Textinput on iOS
Posted by Fréderic Cox <co...@gmail.com>.
It should align vertically by default. I just tested this build with Flex
4.6.0 / AIR 3.8 and it is working fine there. Also in Apache Flex 4.10 / AIR
3.8 it is working fine.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p7419.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Problems with vertical alignment of Textinput on iOS
Posted by Neverbirth <ne...@gmail.com>.
AFAIK, Flex does not support vertical alignment when using StageText, you
could try to make your own skin deriving from ScrollingStageTextInputSkin
(better StageTextInputSkin if your form won't need scrolling), override
layoutContents and try to adjust your textDisplay.y property.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problems-with-vertical-alignment-of-Textinput-on-iOS-tp7417p7418.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.