Fix multicheckbox layout

Project.toml

@@ -1,7 +1,7 @@
 name = "PlutoUI"
 uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
 authors = ["Fons van der Plas <[email protected]>"]
-version = "0.7.24"
+version = "0.7.25"
 
 [deps]
 AbstractPlutoDingetjes = "6e696c72-6542-2067-7265-42206c756150"

assets/multicheckbox.css

@@ -1,24 +1,24 @@
-.multicheckbox-container {
+plj-multi-checkbox {
   display: flex;
   flex-wrap: wrap;
   /* max-height: 8em; */
 }
 
-.multicheckbox {
+plj-multi-checkbox * {
   display: flex;
 }
 
-div.multicheckbox {
+plj-multi-checkbox > div {
   margin: 0.1em 0.3em;
   align-items: center;
 }
 
-label.multicheckbox,
-input.multicheckbox {
+plj-multi-checkbox label,
+plj-multi-checkbox input {
   cursor: pointer;
 }
 
-.select-all {
+plj-multi-checkbox .select-all {
   font-style: italic;
   color: hsl(0, 0%, 25%, 0.7);
 }

assets/multicheckbox.js

@@ -9,10 +9,8 @@ for (let i = 0; i < labels.length; i++) {
   const boxId = `${my_id}-box-${i}`;
 
   const item = document.createElement("div");
-  item.classList.add("multicheckbox");
 
   const checkbox = document.createElement("input");
-  checkbox.classList.add("multicheckbox");
   checkbox.type = "checkbox";
   checkbox.id = boxId;
   checkbox.name = labels[i];
@@ -22,7 +20,6 @@ for (let i = 0; i < labels.length; i++) {
   item.appendChild(checkbox);
 
   const label = document.createElement("label");
-  label.classList.add("multicheckbox");
   label.htmlFor = boxId;
   label.innerText = labels[i];
   item.appendChild(label);
@@ -44,19 +41,16 @@ function updateSelectAll() {}
 if (includeSelectAll) {
   // Add select-all checkbox.
   const selectAllItem = document.createElement("div");
-  selectAllItem.classList.add("multicheckbox");
   selectAllItem.classList.add(`select-all`);
 
   const selectID = `${my_id}-select-all`
 
   const selectAllInput = document.createElement("input");
-  selectAllInput.classList.add("multicheckbox");
   selectAllInput.type = "checkbox";
   selectAllInput.id = selectID;
   selectAllItem.appendChild(selectAllInput);
 
   const selectAllLabel = document.createElement("label");
-  selectAllLabel.classList.add("multicheckbox");
   selectAllLabel.htmlFor = selectID;
   selectAllLabel.innerText = "Select All";
   selectAllItem.appendChild(selectAllLabel);

src/MultiCheckBox.jl

@@ -134,7 +134,7 @@ begin
 		for (k,v) in mc.options]
 
         show(io, m, @htl("""
-        <multi-checkbox class="mc-container" style="flex-direction: $(mc.orientation);"></multi-checkbox>
+        <plj-multi-checkbox style="flex-direction: $(mc.orientation);"></plj-multi-checkbox>
         <script type="text/javascript">
             const labels = $([string(v) for (k,v) in mc.options]);
             const values = $(1:length(mc.options));