Add border around longer radiobutton answers

UI/FullScreenMessageBoxHandler.ts

@@ -14,11 +14,8 @@ export class FullScreenMessageBox extends UIElement {
     private readonly returnToTheMap: UIElement;
 
     constructor(onClear: (() => void)) {
-        super(undefined);
+        super();
-
         const self = this;
-
-        
         State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
             this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
                 "display:block;"+

UI/TagRendering.ts

@@ -294,8 +294,15 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
                 (t0, t1) => t0.isEquivalent(t1)
             );
         }
-        return new FixedInputElement(this.ApplyTemplate(mapping.txt), mapping.k,
+        
+        let txt = this.ApplyTemplate(mapping.txt);
+        if(txt.Render().indexOf("<img") >= 0){
+            txt.SetClass("question-option-with-border");
+        }
+        const inputEl = new FixedInputElement(txt, mapping.k,
             (t0, t1) => t1.isEquivalent(t0));
+        
+        return inputEl;
     }
 
 

UI/UIElement.ts

@@ -185,14 +185,21 @@ export abstract class UIElement extends UIEventSource<string> {
     public SetClass(clss: string): UIElement {
         this.dumbMode = false;
         if (clss === "" && this.clss.length > 0) {
-            this.clss = [];
+            throw "Use RemoveClass instead";
-            this.Update();
         } else if (this.clss.indexOf(clss) < 0) {
             this.clss.push(clss);
             this.Update();
         }
         return this;
     }
+    public RemoveClass(clss: string): UIElement {
+        const i = this.clss.indexOf(clss);
+        if (i >= 0) {
+            this.clss.splice(i, 1);
+            this.Update();
+        }
+        return this;
+    }
 
 
     public SetStyle(style: string): UIElement {

index.css

@@ -63,69 +63,68 @@ body {
     padding: 0.15em 0.3em;
 }
 
-    .question form {
+.question form {
     display: inline-block;
     max-width: 90vw;
     width: 100%;
-    }
+}
 
-    .invalid {
+.invalid {
     box-shadow: 0 0 10px #ff5353;
     height: min-content;
-    }
+}
 
-    .shadow {
+.shadow {
     box-shadow: 0 0 10px #00000066;
-    }
+}
 
-    .title-font span {
+.title-font span {
     font-size: xx-large !important;
     font-weight: bold;
-    }
+}
 
-    .soft {
+.soft {
     background-color: #e5f5ff;
     font-weight: bold;
     border-radius: 1em;
     margin: 0.25em;
     text-align: center;
     padding: 0.15em 0.3em;
-    }
+}
 
 
-    .subtle {
+.subtle {
     color: #999;
-    }
+}
 
-    .bold {
+.bold {
     font-weight: bold;
-    }
+}
 
-    .thanks {
+.thanks {
     background-color: #43d904;
     font-weight: bold;
     border-radius: 1em;
     margin: 0.25em;
     text-align: center;
     padding: 0.15em 0.3em;
-    }
+}
 
-    .clickable {
+.clickable {
     pointer-events: all;
-    }
+}
 
-    .page-split {
+.page-split {
     display: flex;
     height: 100%;
-    }
+}
 
 
-    .activate-osm-authentication {
+.activate-osm-authentication {
     cursor: pointer;
     color: blue;
     text-decoration: underline;
-    }
+}
-
 
 
 #searchbox {
@@ -178,23 +177,22 @@ body {
 
 }
 
-    #userbadge {
+#userbadge {
     width: 100%
-    }
+}
 
-    #userbadge p {
+#userbadge p {
     margin: 0;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
-    }
+}
 
-    .add-popup-all-buttons {
+.add-popup-all-buttons {
     max-height: 50vh;
     display: inline-block;
     overflow-y: auto;
     width: 100%;
-    }
+}
-
 
 
 /**************************************/
@@ -219,11 +217,11 @@ body {
     border-top-left-radius: 2em;
     border-bottom-left-radius: 2em;
     display: inline-block;
-    height:100%;
+    height: 100%;
     box-shadow: -10px 0 10px -10px #0006;
 }
 
-.collapse-button .collapse-button-img{
+.collapse-button .collapse-button-img {
     background-color: #e5f5ff;
 }
 
@@ -254,7 +252,7 @@ body {
 
 }
 
-.collapse-button-img img{
+.collapse-button-img img {
     width: 1.5em;
     margin: 0;
     padding: 0;
@@ -327,42 +325,41 @@ body {
 
 }
 
-    .attribution-author {
+.attribution-author {
     display: inline-block;
-    }
+}
 
-    .license {
+.license {
     font-size: small;
     font-weight: lighter;
-    }
+}
 
-    .attribution a {
+.attribution a {
     color: white;
-    }
+}
 
 
-    /***************** Info box (box containing features and questions ******************/
+/***************** Info box (box containing features and questions ******************/
 
-    .leaflet-popup-content {
+.leaflet-popup-content {
     width: 40em !important;
     max-height: 80vh;
     overflow-y: auto;
-    }
+}
 
 
-    .featureinfoboxtitle span {
+.featureinfoboxtitle span {
     width: unset !important;
-    }
+}
 
-    .question .form-text-field > input {
+.question .form-text-field > input {
     width: 100%;
     box-sizing: border-box;
-    }
+}
 
-    .osm-logo path {
+.osm-logo path {
     fill: #7ebc6f;
-    }
+}
-
 
 
 .infoboxcontents {
@@ -385,7 +382,7 @@ body {
 
 }
 
-.question-text{
+.question-text {
     font-size: larger;
     font-weight: bold;
 }
@@ -394,11 +391,24 @@ body {
     max-width: 100%;
 }
 
-.question-subtext{
+.question-subtext {
     font-size: medium;
     font-weight: normal;
 }
 
+.question-option-with-border{
+    border: 2px solid lightgray;
+    border-radius: 0.5em;
+    display: inline-block;
+    width: 90%;
+    box-sizing: border-box;
+    padding: 1em;   
+}
+
+input:checked+label .question-option-with-border{
+    border: 2px solid black;
+}
+
 
 /**** The save button *****/
 
@@ -504,7 +514,7 @@ body {
     height: 3em;
     margin-right: 0.5em;
     padding: 0;
-    padding-bottom:0.2em;
+    padding-bottom: 0.2em;
 }