How to make checkboxes in sidebar 2 columns

Question

So I have a sheet where I added a Custom Menu (that I have searched and found in google).

The Custom Menu shows a dialog (see image below) It returns all the data validation I have in a specific cell, each of which has a checkbox so I can select multiple options and return it in a single cell.

Code below:

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

Anyone knows how can I make it 2 columns and not like that? I feel like this layout is so messy.

Answer 1

Create an unordered list with your inputs, and with css specify 2 columns for the ul.

Example:

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>

---

For your case, you should do something like the following:

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

References:

• List in columns