elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fix question styling (but break click action)

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

6
UI/Input/RadioButton.ts
View file

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

3
UI/Popup/TagRenderingQuestion.ts
View file

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

6
css/tagrendering.css
View file

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