标签在移动设备上的 FormItem 中未正确对齐答案

【问题标题】：Label is not aligned correctly in FormItem on mobile标签在移动设备上的 FormItem 中未正确对齐
【发布时间】：2012-11-07 02:28:17
【问题描述】：

FormItem 在移动设备上未正确对齐。有解决办法吗？

<s:Form width="100%" backgroundColor="#ff0000">
    <s:FormItem label="First Name" width="100%" >
        <s:TextInput id="firstName" width="100%" borderAlpha="0"  />
    </s:FormItem>

    <s:FormItem label="Last Name" width="100%" >
        <s:TextInput id="lastName" width="100%" borderAlpha="0"  />
    </s:FormItem>
</s:Form>

注意：在 HGroup 上设置基线时，会发生同样的事情。

    <s:HGroup width="100%" verticalAlign="baseline">
        <s:Label text="First Name" />
        <s:TextInput id="a" width="100%" 
                     height="32"
                     minHeight="0"
                     paddingTop="0" paddingBottom="0" 
                     borderVisible="false"
                     contentBackgroundAlpha="0"
                     contentBackgroundColor="#00ff00"
                     focusAlpha="0"/>
    </s:HGroup>

【问题讨论】：

您使用的是 Flex 4.6 还是 4.7 SDK？
我认为这可能与移动设备上的嵌入字体有关。必须检查更多。

标签： apache-flex flex4 flex4.5 flex-spark flex4.6

【解决方案1】：

将布局添加到您的表单，垂直对齐设置为中间：

<s:Form width="100%"
        backgroundColor="#ff0000">

    <s:layout>
        <s:VerticalLayout verticalAlign="middle" />
    </s:layout>

    <s:FormItem label="First Name"
                width="100%">
        <s:TextInput id="firstName"
                     width="100%"
                     borderAlpha="0" />
    </s:FormItem>

    <s:FormItem label="Last Name"
                width="100%">
        <s:TextInput id="lastName"
                     width="100%"
                     borderAlpha="0" />
    </s:FormItem>

</s:Form>

【讨论】：