diff --git a/src/addon/qtype/ddwtos/classes/ddwtos.ts b/src/addon/qtype/ddwtos/classes/ddwtos.ts index c6fb9c365..14928b681 100644 --- a/src/addon/qtype/ddwtos/classes/ddwtos.ts +++ b/src/addon/qtype/ddwtos/classes/ddwtos.ts @@ -14,6 +14,7 @@ import { CoreLoggerProvider } from '@providers/logger'; import { CoreDomUtilsProvider } from '@providers/utils/dom'; +import { CoreTextUtilsProvider } from '@providers/utils/text'; /** * Set of functions to get the CSS selectors. @@ -59,7 +60,8 @@ export class AddonQtypeDdwtosQuestion { * @param {string[]} inputIds Ids of the inputs of the question (where the answers will be stored). */ constructor(logger: CoreLoggerProvider, protected domUtils: CoreDomUtilsProvider, protected container: HTMLElement, - protected question: any, protected readOnly: boolean, protected inputIds: string[]) { + protected question: any, protected readOnly: boolean, protected inputIds: string[], + protected textUtils: CoreTextUtilsProvider) { this.logger = logger.getInstance('AddonQtypeDdwtosQuestion'); this.initializer(question); @@ -406,7 +408,7 @@ export class AddonQtypeDdwtosQuestion { protected padToWidthHeight(node: HTMLElement, width: number, height: number): void { node.style.width = width + 'px'; node.style.height = height + 'px'; - node.style.lineHeight = height + 'px'; + // Originally lineHeight was set as height to center the text but it comes on too height lines on multiline elements. } /** @@ -528,6 +530,7 @@ export class AddonQtypeDdwtosQuestion { // Find max height and width. groupItems.forEach((item) => { + item.innerHTML = this.textUtils.decodeHTML(item.innerHTML); maxWidth = Math.max(maxWidth, Math.ceil(item.offsetWidth)); maxHeight = Math.max(maxHeight, Math.ceil(item.offsetHeight)); }); diff --git a/src/addon/qtype/ddwtos/component/ddwtos.scss b/src/addon/qtype/ddwtos/component/ddwtos.scss index 69d5ae1c1..47ae4151e 100644 --- a/src/addon/qtype/ddwtos/component/ddwtos.scss +++ b/src/addon/qtype/ddwtos/component/ddwtos.scss @@ -7,6 +7,7 @@ addon-qtype-ddwtos { .draghome { margin-bottom: 1em; + max-width: calc(100%); } .answertext { @@ -25,6 +26,9 @@ addon-qtype-ddwtos { text-align: center; background: transparent; border: 0; + white-space: normal; + overflow: visible; + word-wrap: break-word; } .draghome, .drag.unplaced{ border: 1px solid $gray-darker; @@ -106,3 +110,15 @@ addon-qtype-ddwtos { bottom: -0.2em; } } + +addon-qtype-ddwtos .item-md .draghome { + max-width: calc(100% - #{($item-md-padding-start)}); +} + +addon-qtype-ddwtos .item-ios .draghome { + max-width: calc(100% - #{($item-ios-padding-start)}); +} + +addon-qtype-ddwtos .item-wp .draghome { + max-width: calc(100% - #{($item-wp-padding-start)}); +} diff --git a/src/addon/qtype/ddwtos/component/ddwtos.ts b/src/addon/qtype/ddwtos/component/ddwtos.ts index 80f97c38e..710fbef3c 100644 --- a/src/addon/qtype/ddwtos/component/ddwtos.ts +++ b/src/addon/qtype/ddwtos/component/ddwtos.ts @@ -93,7 +93,7 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent impleme this.domUtils.waitForImages(this.questionTextEl.nativeElement).then(() => { // Create the instance. this.questionInstance = new AddonQtypeDdwtosQuestion(this.loggerProvider, this.domUtils, this.element, - this.question, this.question.readOnly, this.inputIds); + this.question, this.question.readOnly, this.inputIds, this.textUtils); this.questionHelper.treatCorrectnessIconsClicks(this.element, this.component, this.componentId);