Белый текст в опциях выбора ящика - HTML-диалог в Google App Script - PullRequest
Новая
       12

Белый текст в опциях выбора ящика - HTML-диалог в Google App Script

0 голосов
/ 27 марта 2019

Я создаю пользовательский HTML-диалог для Google Sheets. На рассматриваемой странице будет форма для создания рабочего задания. Я использую Bootstrap 4 для стилизации, и у меня есть некоторые добавленные JS внутри документа для отображения и скрытия некоторых элементов. Я еще не закончил с кодом, я запустил скрипт в Google Sheets и обнаружил две проблемы.

У меня есть несколько полей выбора в форме, они заполнены пробелом (как исходная выбранная опция), опцией «Новый», и когда я закончу, скрипт будет динамически заполнять остальные опции (опция «Существующий» является временным). Когда я загружаю страницу из Google Sheets, выделенные поля представляют собой белый текст с белым фоном. Когда что-то выбрано, оно будет отображаться в поле ввода в виде черного текста, но пользователь не сможет увидеть параметры.

Другая проблема - ввод даты. Я использую всплывающее окно календаря ввода браузера. После загрузки HTML календарь отключается, и вы можете видеть только несколько дней на выбор. Все, кто использует это, будут в Desktop 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>

Java Script для события onChange в поле выбора 


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

Bootstrap обязательные ссылки на скрипты 

    <!-- 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>
...