Fix question styling (but break click action)

This fixes the styling but breaks the click action. Clicking on the text itself also triggers the action, clicking on the blank sapce next to it changes the label but does not trigger the action.

Generally speaking the style is easier to apply to an element that wraps the in put and the label-text. This could be the label-tag or a different wrapper.
This commit is contained in:
Tobias 2021-01-21 06:03:34 +01:00
parent 1b6178a66a
commit 15a9441b1d
3 changed files with 6 additions and 11 deletions

View file

@ -74,11 +74,11 @@ export class RadioButton<T> extends InputElement<T> {
for (let i = 0; i < this._elements.length; i++){
const el = this._elements[i];
const htmlElement =
`<label for="${this.IdFor(i)}" class="question-option-with-border">` +
`<input type="radio" id="${this.IdFor(i)}" name="radiogroup-${this.id}">` +
`<label for="${this.IdFor(i)}">${el.Render()}</label>` +
`<br>`;
el.Render() +
`</label>`;
body += htmlElement;
}
return `<form id='${this.id}-form'>${body}</form>`;

View file

@ -102,9 +102,6 @@ export default class TagRenderingQuestion extends UIElement {
return ff;
}
mappings = Utils.NoNull([...mappings, ff]);
mappings.forEach(el => el.SetClass("question-option-with-border"))
if (this._configuration.multiAnswer) {
return this.GenerateMultiAnswer(mappings, ff)
} else {

View file

@ -94,13 +94,11 @@
.question-option-with-border {
border: 2px solid lightgray;
border-radius: 0.5em;
display: inline-block;
display: block;
width: 100%;
margin: 0;
margin-left: -2em;
margin: 5px 0;
box-sizing: border-box;
padding: 0.5em;
padding-left: 2em;
}
input:checked + label .question-option-with-border {