POC - Form Fieldset with stretched width 9

index.html

<!-- <form dir="rtl"> -->
<form>
  
  <fieldset class="formgrid">
    <legend>Donec ornare</legend>
    
    <div class="nothing">
      <input id="input-1" name="input-1" type="text" class="column-2" />
      <label for="input-1">Vivamus a nulla</label>
      
      <select id="input-2" name="input-2" class="column-2">
        <option value="1"></option>
        <option value="2">Donec at dolor ut urna efficitur</option>
        <option value="3">Vivamus a nulla ut felis rutrum</option>
      </select>
      <label for="input-2">Metus auctor</label>
      
      <input id="input-3" name="input-3" type="checkbox" class="column-2-no-label" />
      <label for="input-3" class="column-2-shifted-label">Nullam</label>
    
      <input id="input-4" name="input-4" type="checkbox" class="column-2-no-label" />
      <label for="input-4" class="column-2-shifted-label">Nunc</label>
    
      <input id="input-5" name="input-5" type="checkbox" class="column-2-no-label" />
      <label for="input-5" class="column-2-shifted-label">Fusce</label>
      
      <textarea id="input-6" name="input-6" rows="5" cols="20" class="column-2"></textarea>
      <label for="input-6">Pellentesque</label>
    </div>
    
  </fieldset>

  <fieldset class="formgrid">
    <legend>Donec ornare</legend>
    
    <div class="nothing">
      <input id="input-10" name="input-10" type="text" class="column-2" />
      <label for="input-10">Vivamus a nulla</label>
      
      <select id="input-20" name="input-20" class="column-2">
        <option value="1"></option>
        <option value="2">Donec at dolor ut urna efficitur</option>
        <option value="3">Vivamus a nulla ut felis rutrum</option>
      </select>
      <label for="input-20">Metus auctor</label>
      
      <input id="input-30" name="input-30" type="checkbox" class="column-2-no-label" />
      <label for="input-30" class="column-2-shifted-label">Nullam</label>
    
      <input id="input-40" name="input-40" type="checkbox" class="column-2-no-label" />
      <label for="input-40" class="column-2-shifted-label">Nunc</label>
    
      <input id="input-50" name="input-50" type="checkbox" class="column-2-no-label" />
      <label for="input-50" class="column-2-shifted-label">Fusce</label>
      
      <textarea id="input-60" name="input-60" rows="5" cols="20" class="column-2"></textarea>
      <label for="input-60">Pellentesque ornare est eu</label>
    </div>
    
  </fieldset>
  
  <fieldset class="formgrid">
    <legend>Donec ornare</legend>
    
    <div class="nothing">
      <input id="input-100" name="input-100" type="text" class="column-2" />
      <label for="input-100">Vivamus a nulla</label>
      
      <input id="input-300" name="input-30" type="checkbox" class="column-2-no-label" />
      <label for="input-300" class="column-2-shifted-label">Nullam</label>
    
      <input id="input-400" name="input-400" type="checkbox" class="column-2-no-label" />
      <label for="input-400" class="column-2-shifted-label">Nunc</label>
      
<!--       <div class="empty-label">..</div> -->
      <label for="input-500" class="checkbox-component column-2">
        <input type="checkbox" id="input-500" />
        <span>Sed ultricies felis eu metus</span>
      </label>
      
      <label for="input-600" class="checkbox-component column-2">
        <input type="checkbox" id="input-600" />
        <span>Fusce viverra est sit</span>
      </label>
      
    </div>
    
  </fieldset>
  
  <div class="submit-group">
    <input type="submit" value="Alego">
    <input type="reset" value="Consectetur">
  </div>
</form>

poc-form-fieldset-with-stretched-width-9.markdown

POC - Form Fieldset with stretched width 9

Basic field styles with a floated layout which works in all browsers from IE8+.

A Pen by Jan on CodePen.

License.

script.js

document.addEventListener("DOMContentLoaded", (event) => {
  var fieldsets = document.querySelectorAll('fieldset');
  fieldsets = [...fieldsets];
  var fieldsetsMaxColumnWidth = [];
  
  fieldsets.forEach((f) => {
    // expect that all labels already refer to the max value
    var firstLabel = f.querySelectorAll('.nothing > label')[0];
    console.log('First label', firstLabel);
    // getComputedStyle(document.documentElement).getPropertyValue('--test-box-size');
    // f.dataset.maxWidth = getComputedStyle(firstLabel).getPropertyValue('width');
    fieldsetsMaxColumnWidth.push(getComputedStyle(firstLabel).getPropertyValue('width'));
    
  });
  
  console.log(fieldsetsMaxColumnWidth);
  fieldsetsMaxColumnWidth = fieldsetsMaxColumnWidth.map((num) => Number(num.replace('px','')));
  var maxWidth = Math.ceil(Math.max(...fieldsetsMaxColumnWidth));
  console.log(maxWidth);
  document.documentElement.style.setProperty('--label-width', `${maxWidth + 10}px`);
});

style.css

:root {
  --label-width: max-content;
}

/* Gist */
/* legend,  This does not work */
.nothing {
  display: contents;
}

.formgrid {
  display: grid;
  /* grid-template-columns: 1fr 1em 2fr; */
/*   grid-template-columns: max-content 1em 2fr; */
/*   grid-template-columns: auto 1em 2fr; */
  grid-template-columns: var(--label-width) 1em 2fr;
  grid-gap: 0.3em 0.6em;
  grid-auto-flow: dense;
  align-items: center;
}

/* .formgrid .nothing > * {
  border: 2px dashed red;
  background-color: salmon;
}
 */
.formgrid .nothing > label:not(.column-2-shifted-label):not(.checkbox-component) {
/*   --first-label-width: max-content; */
  border: 2px dashed green;
  background-color: lightgreen;
/*   width: var(--first-label-width); */
/*   width: 250px; */
}

/*   input, textarea, select { */
.column-2 {
  grid-column: 2 / 4;
  width: auto;
  margin: 0;
}

/*   input[type="checkbox"], input[type="radio"] { */
.column-2-no-label {
  grid-column: 1 / 3;
  justify-self: end;
  margin: 0;
}
.column-2-shifted-no-label {
/*   nothin needed only supporting selector */
}


fieldset {
  background-color: lightgray;
  margin-bottom: 2em;
  padding-left: 2em;
}

legend {
  grid-column: 1 / 4;
/*   margin-top: 3em; */
  font-weight: bold;
  background-color: lightgray;
  border: 1px dashed gray;
  padding: .3em 1em;
  margin-bottom: 1em;
  cursor: pointer;
}

.submit-group {
  grid-column: 1 / 4;
  margin: 1em;
}

textarea + label {
  align-self: start;
}


/* Spice */
body {
  font-family: "Helvetica Neue", sans-serif;
  background-color: LightSteelBlue;
}