Как сделать флажки на боковой панели 2 столбца - PullRequest
Новая
       1

Как сделать флажки на боковой панели 2 столбца

0 голосов
/ 05 мая 2020

Итак, у меня есть лист, на котором я добавил пользовательское меню (которое я искал и нашел в Google).

Пользовательское меню показывает диалоговое окно (см. Изображение ниже). Оно возвращает все проверки данных, которые у меня есть в определенной ячейке c, каждая из которых имеет флажок, поэтому я могу выбрать несколько вариантов и вернуть их в одной ячейке.

see image here

Код ниже: 

<div style="font-family: arial;">
<? var data = valid(); ?>
<form id="form" name="form">
<? if(Object.prototype.toString.call(data) === '[object Array]') { ?>
<? for (var i = 0; i < data.length; i++) { ?>
<? for (var j = 0; j < data[i].length; j++) { ?>
<input type="checkbox" id="ch<?= '' + i + j ?>" name="ch<?= '' + i + j ?>" value="<?= data[i][j] ?>"><?= data[i][j] ?>&nbsp;
<? } ?>
<? } ?>
<? } else { ?>
<p>Maybe current cell doesn't have <a href="https://support.google.com/drive/answer/139705?hl=en">Data validation...</a></p>
<? } ?>
<br>
<br>
<input type="button" value="Fill Current Cell" onclick="google.script.run.fillCell(this.parentNode)" />
<input type="button" value="Clear Selections" onclick="reset()" />
</form>
</div>

Кто-нибудь знает, как можно сделать 2 столбца и не так? Я чувствую, что этот макет такой беспорядочный.

1 Ответ

2 голосов
/ 05 мая 2020

Создайте неупорядоченный список с вашими входными данными и с помощью css укажите 2 столбца для ul.

Пример:

HTML

<ul>
  <li><input type="checkbox">Option 1</li>
  <li><input type="checkbox">Option 2</li>
  <li><input type="checkbox">Option 3</li>
  <li><input type="checkbox">Option 4</li>
  <li><input type="checkbox">Option 5</li>
</ul>

CSS

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

JS FIDDLE 

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style-type: none;
}
<ul>
  <li><input type="checkbox">Option 1</li>
  <li><input type="checkbox">Option 2</li>
  <li><input type="checkbox">Option 3</li>
  <li><input type="checkbox">Option 4</li>
  <li><input type="checkbox">Option 5</li>
</ul>

Для вашего случая вы должны сделать что-то вроде следующего: 

<ul>
<? for (var i = 0; i < data.length; i++) { ?>
<? for (var j = 0; j < data[i].length; j++) { ?>
<li><input type="checkbox" id="ch<?= '' + i + j ?>" name="ch<?= '' + i + j ?>" value="<?= data[i][j] ?>"></li>
<? } ?>
<? } ?>
</ul>

Ссылки:

...