CSS 用于 Google 应用制作工具中的必填字段

Question

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

一些文本框需要输入，因此当将它们拖到页面时，标签带有星号 (*) 标记，例如"Birthday *".

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

Answer 1

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

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

CSS:

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

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

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

附加说明：我尝试使用 appmaker 默认值 css class 这是 必需的 但它没有用。此外，我只在 TextBox 小部件上对此进行了测试。

希望对您有所帮助！

Answer 2

为什么会这样？

一旦您将表单拖放到页面上，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 + ' *'

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

CSS 用于 Google 应用制作工具中的必填字段

CSS for required fields in Google App Maker

css

google-app-maker