Google app maker Google App Maker-如何在下拉/文本框小部件的标签和输入之间保持恒定的空间？

我在表单中有一个带有标签/显示名称的字段：

“我可以确认，该供应不受测试组的限制，或属于专家性质，因此需要进行其他检查，但该方法不支持。”

我正在使用一个带有选项Yes和No的下拉小部件来显示它

我可以在css下面尝试包装标签

     .app-AddRequest-Field15-Label {
            white-space: normal;
       }

但是现在输入和标签之间的空间非常小。即使我在移动视图中为输入添加了页边空白顶部，标签仍会包裹更多，空间仍然非常小/两者都覆盖

带边框的图像

标签边框：黑色

输入边框：橙色

---

我希望在所有视图中保持恒定的空间。请提出建议。

我模拟了一个解决方案，可以在一个标签中处理多达四行数据。以下是您需要遵循的步骤：

1.）在全局css中，确保有以下行：

.app-Dropdown-Label {
  white-space: normal;
}

.twoLinesLabel{  
  top: -15px !important;
}

.threeLinesLabel{  
  top: -30px !important;
}

.fourLinesLabel{  
  top: -45px !important;
}

2.）在任何客户端脚本上放置以下内容：

function adjustLabel(widget){
  var label = widget.getElement().children[0];
  var ch = label.clientHeight;
  var lines =  Math.floor(ch / 15);
  switch(lines){
    case 2:
      label.classList.add("twoLinesLabel");
      break;
    case 3:
      label.classList.add("threeLinesLabel");
      break;
    case 4: 
      label.classList.add("fourLinesLabel");
      break;
  }
}

3.）在需要进行此调整的任何DropdOn的事件处理程序上，放置以下内容：

adjustLabel(widget);

这种方法的唯一问题是，在UI中，您将无法看到字段所需的空间，从而不会与前一个字段溢出。因此，你必须预览应用程序并做出相应的调整

另一种方法是确保CSS看起来像这样：

.app-Dropdown-Label {
  white-space: normal;
}

.twoLinesLabel label{  
  top: -15px !important;
}

.threeLinesLabel label{  
  top: -30px !important;
}

.fourLinesLabel label{  
  top: -45px !important;
}

然后在属性编辑器的“显示”类别中，只需将相应的编码样式添加到下拉列表中即可。这样，您将能够立即在编辑器中看到更改

无论您选择何种方式，结果如下：

adjustLabel(widget);

---

为什么不使用带有标签样式的标签小部件，而不是使用dropdwon标签？@Morfinismo我的表单和其他表单中已经有很多这样的下拉字段。如果我改用独立标签的方法，那对我来说将是一点返工。@Morfinismo如果这有助于获得线索，请再观察一次。我在标签和输入中添加了边框，以了解发生这种情况的原因，从中可以看出标签似乎占据了下拉窗口小部件中的所有空间，而输入就在其中。使用新的屏幕快照更新了问题，虽然在一定程度上起到了作用，但仍需要我们进行更多调整，以及它如何不影响我的表单它们在标签上。考虑到ATM无法提供直接的直接解决方案，正如您前面提到的那样，我现在转向了个人标签方法。@ab.it.gcp好吧，我已经尽力了。祝您在未来的实现中好运！