0

我有一个简单的表格：

<j:Form id="myForm3" x="720 "y="120" height="100" width="300">
    <j:FormItem label="data24"> 
        <b:TextInput id="data24"/>
    </j:FormItem>
    <j:FormItem label="data25"> 
        <b:TextInput id="data25"/>
    </j:FormItem>
    <j:FormItem label="data26"> 
        <b:TextInput id="data26"/>
    </j:FormItem>
<j:Form />

我想控制标签和文本输入框之间的间隙。我以为我可以用 CSS 做到这一点，但我找不到正确的组合。如何控制这个差距？

或者有没有更好的方法来做表格？

4

2 回答 2

0

间隙FormItem通过布局珠进行控制。默认情况下，在以下示例中（与您的类似），我HorizontalLayout仅在第一个示例中添加了一个珠子，FormItem以显示与其他示例的区别：

<j:Form id="myForm3" x="720 "y="120" height="100" width="300">
    <j:FormItem label="data24">
        <j:beads>
            <j:HorizontalLayout gap="8"/>
        </j:beads> 
        <j:TextInput localId="data24"/>
    </j:FormItem>
    <j:FormItem label="data25"> 
        <j:TextInput localId="data25"/>
    </j:FormItem>
</j:Form>

我改变id了localId因为 html 不喜欢重复，所以最好总是在后面使用。

注 1：默认间隙在 Jewel Theme 中

j|FormItem
    gap: 2
    itemsVerticalAlign: itemsCentered

注意 2：a gap = 2 表示默认 Jewel 主题，2x3 = 6 像素。这些值在 CSS 中烘焙，是 4 的倍数。所有默认数字都可以通过 SASS 在 Jewel Theme 中配置，以获得更大的灵活性。

于 2020-09-08T18:36:58.383 回答
0

虽然最后的反应是好的。这是您的特定用例所需的代码。您需要添加一个 CSS 规则来隐藏“必需”部分。我是在表单级别完成的，但也可以在表单项级别完成，但猜你想在所有表单中删除：

<j:Form localId="myForm3" x="720 "y="120" height="100" width="300" 
        className="remove-required">
        <j:FormItem label="data24">
            <j:beads>
                <j:HorizontalLayout gap="0"/>
            </j:beads> 
            <j:TextInput localId="data24"/>
        </j:FormItem>
        <j:FormItem label="data25">
            <j:beads>
                <j:HorizontalLayout gap="0"/>
            </j:beads>
            <j:TextInput localId="data25"/>
        </j:FormItem>
    </j:Form>

    <fx:Style>
        .jewel.form.remove-required .jewel.label.required {
            display: none;
        }
    </fx:Style>
于 2020-09-10T11:23:03.007 回答