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: " *";
}

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

• 您可以在绑定中明确添加星号 @models.MyModel.fields.FieldName.displayName + ' *'

另请注意，App Maker不会自动将这些隐藏的样式添加到您生成表单后添加的小部件中。

Answer 2

下面的解决方案对我有用，虽然也可能有其他方法。

请注意：如果您只在一个页面中使用它，请将css代码放在页面样式级别，否则，将其置于全局样式级别。

CSS：

.customRequired::after {
  content: " *";
}

编写完CSS后，转到TextBox小部件的onAttach事件并使用以下JS：

var elem = widget.getElement();
elem.children[0].classList.add("customRequired");

附加说明：我尝试使用appmaker默认的css类，但它不起作用。此外，我只在TextBox小部件上测试了它。

希望能帮助到你！