Question

我正在为Google表格构建一些客户HTML对话框。有问题的页面将是用于创建工作订单的表格。我正在使用Bootstrap 4进行样式设置，并且在文档内部添加了一些JS，用于显示和隐藏一些元素。我还没有完成代码，我在Google表格中运行了脚本，发现了两个问题。

我在表单中有几个选择框，它们用空白填充（作为初始选择的选项），一个“新建”选项，当我完成后，脚本将动态填充其余选项（该选项“现有”是暂时的）。当我从Google表格加载页面时，选择框是带有白色背景的白色文本。选择某些内容后，它将在输入框中显示为黑色文本，但用户看不到这些选项。

另一个问题是日期输入。我正在使用浏览器输入日历弹出窗口。加载html后，日历将被切断，您只能看到几天可供选择。每个使用此工具的人都可以在台式机Chrome上使用，因此不必担心移动或跨浏览器的兼容性。

对于选择框的问题，我尝试将颜色样式标签添加到选择框的选项中，但这无济于事，对于日历，我不知道解决方案是什么。

加载页面的代码

function createWO() {
  var html = HtmlService.createTemplateFromFile("createWO").evaluate().setTitle("Create Work Order").setWidth(1500).setHeight(1000);
   SpreadsheetApp.getUi() 
      .showModalDialog(html, 'Create New WorkOrder');
}

HTML的片段

头部的元标记

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

头部的样式表参考

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

选择引起问题的框


                            <div class="form-group">
                                <label for="custID">Customer Name</label>
                                <select class="form-control" id="custID" onchange="customer(this.value);">
                                    <option selected></option>
                                    <option value="1">New</option>
                                    <option>Existing Customer</option>
                                <!--Script Will Populate Select Box-->
                                </select> 
                            </div>

选择框中的onChange事件的Java脚本


        <!-- Document JavaScript -->
    <script>
    function customer(value) {
        if (value=='1')
            document.getElementById('hiddencustomer').style.display = 'block';
        else
            document.getElementById('hiddencustomer').style.display = 'none';
    }
    </script>

引导所需的脚本参考

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

选择框选项中的白色文本-Google App脚本中的HTML对话框

0 个答案: