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 小部件上测试了这个。

希望它有所帮助！

Google App Maker中必填字段的CSS

2 个答案: