Question

我想设计带有智能字段的以下图片：

当我尝试使用以下代码进行设计时：

<smartForm:GroupElement>
    <smartField:SmartField value="{Vermieter}"/>
    <smartField:SmartField value="{HIT}" textLabel="HIT"/>
    <smartField:SmartField value="{Konzessionär}" textLabel="Konzessionär"/>
</smartForm:GroupElement>

我收到以下结果：

首先缺少标签。

第二个位置不是完全正确。第二项和第三项之间的距离与第一项和第二项之间的距离不同。

有什么建议吗？

更新

由于@MrNajzs的the comment，我取得了以下进展：

<smartForm:GroupElement>
    <smartField:SmartLabel labelFor="Vermieter"/>
    <smartField:SmartField value="{Vermieter}" id="Vermieter"/>
    <smartField:SmartLabel labelFor="HIT"/>
    <smartField:SmartField value="{HIT}" id="HIT"/>
    <smartField:SmartLabel labelFor="Konzessionaer"/>
    <smartField:SmartField value="{Konzessionär}" id="Konzessionaer"/>
</smartForm:GroupElement>

但是仍然存在一些问题。元素仍未调整。输出为：

在查看模式下：

在编辑模式下：

Answer 1

您可以通过在SmartLabel之前放置SmartField来“激活”标签。在SmartLabel中，您需要通过SmartField引用Id（如下所示）

<smartField:SmartLabel labelFor="idHIT" />
<smartField:SmartField id="idHIT" value="{HIT}" textLabel="HIT"/>

要控制布局，您可能需要探索smartField:layoutData元素。在其中，您可以使用布局名称空间中的GridData元素。但是这里有很多选择。

Answer 2

这是答案。我必须为每个元素使用不同的Group并使用GridData布局。

<smartForm:SmartForm flexEnabled="false">
    <smartForm:Group >
        <smartForm:GroupElement>
            <smartField:SmartField value="{RstID}" width="auto" contextEditable="true" >
                <smartField:configuration>
                    <smartField:Configuration preventInitialDataFetchInValueHelpDialog="false" displayBehaviour="descriptionOnly"/>
                </smartField:configuration>
            </smartField:SmartField>
        </smartForm:GroupElement>
    </smartForm:Group>
</smartForm:SmartForm>
<smartForm:SmartForm flexEnabled="false">
    <smartForm:layout>
        <smartForm:Layout labelSpanL="9" labelSpanM="9" labelSpanS="12" columnsL="3" columnsM="3" />
    </smartForm:layout>
    <smartForm:Group>
        <smartForm:layoutData>
            <l:GridData span="L4 M3 S6" indent="L1 M3"/>
        </smartForm:layoutData>
        <smartForm:GroupElement>
            <smartField:SmartField value="{Vermieter}"/>
        </smartForm:GroupElement>
    </smartForm:Group>
    <smartForm:Group>
        <smartForm:layoutData>
            <l:GridData span="L3 M3 S6"/>
        </smartForm:layoutData>
        <smartForm:GroupElement>
            <smartField:SmartField value="{HIT}"/>
        </smartForm:GroupElement>
    </smartForm:Group>
    <smartForm:Group>
        <smartForm:layoutData>
            <l:GridData span="L3 M3 S6"/>
        </smartForm:layoutData>
        <smartForm:GroupElement>
            <smartField:SmartField value="{Konzessionär}"/>
        </smartForm:GroupElement>
    </smartForm:Group>
</smartForm:SmartForm>

仍然不是一个完美的解决方案，因为可以看出第一行和第二行的空白之间有一些区别，但是仍然可以忽略！

如何将多个复选框与其标签一起放在一行中？

2 个答案: