formatting issue Debut theme: checkboxes in product page

Arati_Devasher
Shopify Partner
39 0 2

Hello! 

I used the line item property generator to create a set of checkboxes, which show in the generator as below

Screenshot 2021-04-17 at 18.14.20.png

But when I put it into my site, it shows up like this, with the text below the checkboxes and quite a bit more spaced out: 

Screenshot 2021-04-17 at 18.14.20.png

How do I fix this? 

The page I wanted to implement this on: my site 

For the moment I used the text box and a list, but having the text boxes to check would make more sense.

Here's the code the generator gives me:

<p class="line-item-property__field">
  <label>Choose below:</label><br>
  <input type="checkbox" id="A" hidden-data="Choose-below:" onchange="fillHidden('Choose-below:')" value="A"><label for="A">A</label><br>
  <input type="checkbox" id="B" hidden-data="Choose-below:" onchange="fillHidden('Choose-below:')" value="B"><label for="B">B</label><br>
  <input type="checkbox" id="C" hidden-data="Choose-below:" onchange="fillHidden('Choose-below:')" value="C"><label for="C">C</label><br>
  <input type="hidden" id="Choose-below:" name="properties[Choose below:]">
  <script>
    function fillHidden(hiddenname) {
    var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
    var hiddenfield = document.getElementById(hiddenname);
    hiddenfield.value = ""
    var i;
    for (i = 0; i < checkboxes.length; i++) {
      var x = checkboxes[i];
      if(x.checked){
        if(hiddenfield.value==""){
          hiddenfield.value = x.value;
          }else{
          hiddenfield.value = hiddenfield.value + ", " + x.value; 
          } 
        }
      }
    }
  </script>
</p>

 

0 Likes