Checkboxes/radios in tableselect are misaligned

First, this base theme isn't meant to be an "admin" theme. It's simply a base theme. Administrative areas are likely to have little quirks (like this one) until something like https://www.drupal.org/project/bootstrap_admin can get out the door.

That being said, this is more about how to deal with the tableselect render element, which can also appear on the front facing site (I've encountered this already) and have a CSS solution that will need to be added to the CSS overrides.

I tracked this down a little and the actual problem is not the CSS, but the way the tableselect checkboxes are rendered. Normally all checkboxes are rendered inside their label, but the tableselect checkbox gets rendered after the label:

<div class="form-item js-form-item form-type-checkbox js-form-type-checkbox form-no-label checkbox">
  <label ... >Select this item</label>
  <input name="field_name[XXX:YYY]" type="checkbox" ... />
</div>

So the actual question is, why are these particular checkboxes rendered outside their label? Is it because of '#title_display' => 'invisible'? When rendered inside an empty label, there should be no problem at all, see http://getbootstrap.com/css/#checkboxes-and-radios-without-label-text

I'll dig into the code later to see if I can eliminate the problem.

Attached you can find a patch that should solve the issue. It adds some more special processing for form labels in checkbox/radio button context:

• Checkbox/radio button elements are now always printed inside the label
• It is ensured that labels with contained checkbox/radio button are always printed regardless of whether they have a title or not
• If title_display is invisible, the title won't be printed, but added as title attribute to the <label /> element itself

Phew, this is really hard to track down, because tableselect checkbox elements do not get a unique class added to them and come from different sources (tableselect element itself, bulk form elements in views and perhaps even more). In the attached patch .form-no-label class is utilized... and when in table context, the margins are cleared. I hope this won't target too many other checkboxes in tables :)

Note: I only changed the source files (because CSS files are compiled automatically when commiting changes). So you have to compile the CSS on your own to see the changes take effect.

1. +++ b/src/Plugin/Preprocess/FormElementLabel.php
   @@ -23,7 +23,16 @@ class FormElementLabel extends PreprocessBase implements PreprocessInterface {
   +    // Labels for single checkboxes/radios contain the element itself and thus
   +    // have always to be rendered regardless of whether they have a title.
   +    if ($element->getProperty('is_checkbox') || $element->getProperty('is_radio')) {
   +      $variables['allow_empty'] = TRUE;
   +    }
   
   +++ b/templates/input/form-element-label.html.twig
   @@ -20,12 +23,16 @@
   +{%- if title is not empty or allow_empty -%}
   

   There doesn't seem to be a reason to have an additional allow_empty variable. Why not just check is_checkbox or is_radio in the template?

2. +++ b/starterkits/less/less/component/form.less
   @@ -2,6 +2,18 @@
   +  &.form-no-label {
   +    // Remove top/bottom margins when in table context, because this is most
   +    // likely a tableselect checkbox element.
   +    table & {
   

   Until there's additional code, there should never be unnecessary nesting. This could be consolidated into:

   table &.form-no-label

3. +++ b/templates/input/form-element-label.html.twig
   @@ -20,12 +23,16 @@
   +{% if title is not empty and title_display == 'invisible' and (is_checkbox or is_radio) -%}
   +  {%- set attributes = attributes.setAttribute('title', title) -%}
   +  {%- set title = null -%}
   +{%- endif -%}
   

   What is the point of this exactly? Seems... verbose and unnecessary.

Thanx for the feedback. Here is the updated patch and some info:

1. You are right, this is removed with new patch

2. Is fixed with new patch (but only in LESS file, because SASS does not allow this use of ampersand selector as far as I know)

3. I added this, so users still have a tooltip when rolling over the checkbox. Also the Bootstrap docs say this for checkboxes without label text:

Remember to still provide some form of label for assistive technologies (for instance, using aria-label)

So this is for screen readers etc. to still have the actual label value available. I added some documentation to it, so nobody is confused about that. Okay for you?

Damn.. it didn't catch all the changes I made... here is the correct patch.

Both LESS and SASS allow this (in newer versions). I fixed before commit.