[#12116] Instructor viewing results of rubric questions: missing space after checkbox

[Trumerik]

Fixes #12116

Outline of Solution
Added a space in the beginning of the Exclude self evaluation text in rubric-question-statistics.component.html

[weiquu]

Hi @Trumerik, thanks for contributing (: The fix looks good, but I'm wondering if we can make it better by adding the space between the checkbox and the text via css instead. This removes the additional dotted line between the checkbox and the text:

Small change, but I think it looks a bit better! Am open to hearing if you have any other suggestions or views as well

[Trumerik]

Hi @weiquu, I totally agree with you! I have now pushed a new solution making use of margin-left to get the space without the additional dotted line! Below is a picture of how it looks now:

[damithc]

@weiquu I assume we have similar 'checkbox followed by text' in other places of the UI. What technique are we using in those places to create space between the checkbox and the text? It is better if we use the same technique everywhere, for consistency.
If the problem occurs in other places too, perhaps we can do the tweak in a way that it is implemented in one place and applied everywhere applicable?

[weiquu]

Thanks @damithc, will take a look later tonight. @Trumerik feel free to help check as well (:

[weiquu]

Quick note: let's try to use bootstrap styles as much as possible. But let's see if there are any other checkbox spaces issues first!

[Trumerik]

I tried looking into some similar 'checkbox followed by text' in other places and found these:

For all the above it seems a simple space has been added at the beginning of the text as I did in my first push, but as there is no dotted line here it works. Below is an example for "Group by Teams" taken from the code:
<label class="form-check-label" ><input id="include-team-grouping" type="checkbox" [ngModel]="groupByTeam" (ngModelChange)="handleGroupByTeamChange($event)" [disabled]="viewType === 'QUESTION'"> Group by Teams</label>

For this it seems that  , which is an HTML entity that represents a non-breaking space, has been added before the span. here is the code:
 
<span class="ngb-tooltip-class" ngbTooltip="If this is unselected, the instructor will be completely invisible to students. E.g. to give access to a colleague for ‘auditing’ your course">Display to students as:</span>

[weiquu]

Thanks @Trumerik for the research! I found a few where they used   as you mentioned, but I think the majority used the form-check class on the surrounding div (e.g. contribution-question-edit-details-form.component.html). This was the case both for text with and without the dotted line.

According to the Bootstrap docs, .form-check automatically improves the layout and helps with consistency, so I think using that would be a better option moving forward. Sorry for the many changes!

[Trumerik]

Thank you @weiquu!
I have now pushed a form-check solution.

[weiquu]

I believe the .form-check class can be placed directly in the above div (i.e. the div with class col-sm-8). Then we don't need to add in the extra div

[weiquu]

Left one small comment, other than that looks good (: Pinging @zhaojj2209 / @samuelfangjw

[Trumerik]

You are correct, thank you @weiquu
I pushed the correction.

[samuelfangjw]

LGTM, thanks for contributing to TEAMMATES!