From 15a9441b1dfb2be298ab9d002f0c503adae7ce06 Mon Sep 17 00:00:00 2001
From: Tobias <t@tobiasjordans.de>
Date: Thu, 21 Jan 2021 06:03:34 +0100
Subject: [PATCH] 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.
---
 UI/Input/RadioButton.ts          | 8 ++++----
 UI/Popup/TagRenderingQuestion.ts | 3 ---
 css/tagrendering.css             | 6 ++----
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/UI/Input/RadioButton.ts b/UI/Input/RadioButton.ts
index b04ce01..0723e1b 100644
--- a/UI/Input/RadioButton.ts
+++ b/UI/Input/RadioButton.ts
@@ -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 =
-                `<input type="radio" id="${this.IdFor(i)}" name="radiogroup-${this.id}">` +
-                `<label for="${this.IdFor(i)}">${el.Render()}</label>` +
-                `<br>`;
+                `<label for="${this.IdFor(i)}" class="question-option-with-border">` +
+                    `<input type="radio" id="${this.IdFor(i)}" name="radiogroup-${this.id}">` +
+                    el.Render() +
+                `</label>`;
             body += htmlElement;
-
         }
 
         return `<form id='${this.id}-form'>${body}</form>`;
diff --git a/UI/Popup/TagRenderingQuestion.ts b/UI/Popup/TagRenderingQuestion.ts
index 3470137..104ed4b 100644
--- a/UI/Popup/TagRenderingQuestion.ts
+++ b/UI/Popup/TagRenderingQuestion.ts
@@ -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 {
diff --git a/css/tagrendering.css b/css/tagrendering.css
index 00502e2..cd07ed5 100644
--- a/css/tagrendering.css
+++ b/css/tagrendering.css
@@ -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 {