xyz 表格；在第一列上使用 [半宽度] 时如何释放“行”的第二个“列”答案

【问题标题】：xyzForm; How to leave free the 2nd "column" of a "row" when using [halfWidth] on the 1st columnxyz 表格；在第一列上使用 [半宽度] 时如何释放“行”的第二个“列”
【发布时间】：2020-10-26 18:40:49
【问题描述】：

我想让 xyzForm.cs 显示一些像这样的字段：

"Line 1" Dropdown                        (leave free)
"Line 2" Field1                          Field2
"Line 3" Field3                          Field4

我的问题是关于（免费）部分。是否有一个声明性分隔符，我可以使用它来强制 Field1 到下一行？

目前，我必须在第 1 行结束之前为下拉菜单提供全宽，以便将 Field1 降到第 2 行。

致以诚挚的问候，

约翰

【问题讨论】：

标签： forms serenity-platform

【解决方案1】：

我不知道任何声明方式。但是您可以编写一些关于仅使用半行作为第 1 行下拉菜单的 CSS。

【讨论】：

【解决方案2】：

还有一种声明方式

public class OrderForm
{
    [HalfWidth(UntilNext = true), LabelWidth(130, UntilNext = true)]
    public DateTime OrderDate { get; set; }
    [FormCssClass("line-break-sm")]
    public DateTime RequiredDate { get; set; }
}

参考https://serenity.is/blog/2018/05/16/multi-column-layout#line-breaking

【讨论】：

【解决方案3】：

感谢@Victor Tomaili 的提示，我找到了以下解决方案：

如果您想缩短（在宽度上）SF 下拉列表（jquery Select2），请使用以下代码：

this.form.<your field>.element.parent().find(".select2-container").find(".select2-choice").addClass("<your CSS classname which contains the desired width either in px or %");

【讨论】：