Google App Maker 中必填字段的 CSS

Question

我目前正在 Google App Maker 中设置输入表单。

一些文本框需要输入，因此当将它们拖到页面时，标签用星号 (*) 标记，例如“生日 *”。

但是当我将文本框拖到面板中以重新排列它们时，星号不断消失。如何让星号再次出现？

Answer 1

为什么会这样？

一旦您将表单拖放到页面上，App Maker 就会将以下 CSS 类添加到表单的小部件中:

• app-FormBody 用于内部表单面板
• required 所有需要输入的输入小部件

在 App Maker 内部的某处还定义了以下 CSS 规则:

/* Show asterisk only for direct children of 'app-FormBody' panel
   marked with 'required' class */
...
.app-FormBody > .app-TextBox.required > .app-TextBox-Label:after,
... {
  content: " *";
}

因此，当您将面板放入表单主体并将您的输入拖入该内部面板时，App Maker CSS 规则将停止工作(小部件不再是 app-FormBody 的直接子级)。

如何解决？

• 您可以尝试覆盖默认的 App Maker 样式

/* Note: there is no '>' selector */
.app-FormBody .app-TextBox.required > .app-TextBox-Label:after {
  content: " *";
}

我不确定它可能会导致什么副作用...

• 您可以在绑定(bind)中显式添加星号

  @models.MyModel.fields.FieldName.displayName + '*'

另请记住，应用制作工具不会自动将这些隐藏样式添加到您将在生成表单后添加的小部件。