MOBILE-1987 quiz: Fix styling match questions

Author: crazyserver

www/addons/qtype/match/scss/styles.scss

@@ -1,7 +1,12 @@
 // Style match content a bit.
-.mma-qtype-match-container {
-  select {
+.mma-qtype-match-container .item-select {
+  select,
+  .mm-select-fix {
     padding: 0 36px 0 0;
     max-width: 100%;
+    display: flex;
+    justify-content:center;
+    align-content:center;
+    flex-direction:column;
   }
 }

www/addons/qtype/match/template.html

@@ -2,15 +2,17 @@
     <div class="item item-text-wrap">
         <p><mm-format-text watch="true" component="{{component}}" component-id="{{componentId}}">{{ question.text }}</mm-format-text></p>
     </div>
-	<div class="item item-text-wrap row mm-item-padding" ng-repeat="row in question.rows">
-		<div class="col">
-			<p><mm-format-text watch="true" id="mma-question-{{row.id}}" component="{{component}}" component-id="{{componentId}}">{{ row.text }}</mm-format-text></p>
-		</div>
-		<div class="col text-center item-select" ng-class='{"mm-question-answer-correct": row.isCorrect === 1, "mm-question-answer-incorrect": row.isCorrect === 0}'>
-			<label class="accesshide" for="{{row.id}}" ng-if="row.accessibilityLabel">{{ row.accessibilityLabel }}</label>
-			<select id="{{row.id}}" name="{{row.name}}" ng-disabled="row.disabled" aria-labelledby="mma-question-{{row.id}}" mm-ios-select-fix>
-				<option ng-repeat="o in row.options" value="{{o.value}}" label="{{o.label}}" ng-selected="{{o.selected}}">{{o.label}}</option>
-			</select>
-		</div>
-	</div>
+    <div class="item item-text-wrap row mm-item-padding" ng-repeat="row in question.rows">
+        <div class="col">
+            <p><mm-format-text watch="true" id="mma-question-{{row.id}}" component="{{component}}" component-id="{{componentId}}">{{ row.text }}</mm-format-text></p>
+        </div>
+        <div class="col" ng-class='{"item-select": !row.disabled, "mm-question-answer-correct": row.isCorrect === 1, "mm-question-answer-incorrect": row.isCorrect === 0}'>
+            <label class="accesshide" for="{{row.id}}" ng-if="row.accessibilityLabel">{{ row.accessibilityLabel }}</label>
+            <select id="{{row.id}}" name="{{row.name}}" ng-if="!row.disabled" aria-labelledby="mma-question-{{row.id}}" ng-options="option.label for option in row.options track by option.value" ng-model="row.selected" mm-ios-select-fix>
+            </select>
+            <p class="mm-select-fix" ng-if="row.selected && row.selected.label">
+                {{row.selected.label}}
+            </p>
+        </div>
+    </div>
 </section>

www/core/components/question/services/helper.js

@@ -687,6 +687,7 @@ angular.module('mm.core.question')
                 rowModel.id = select.id;
                 rowModel.name = select.name;
                 rowModel.disabled = select.disabled;
+                rowModel.selected = false;
                 rowModel.options = [];
 
                 // Check if answer is correct.
@@ -702,12 +703,17 @@ angular.module('mm.core.question')
                         log.warn('Aborting because couldn\'t find option value.', question.name);
                         return self.showDirectiveError(scope);
                     }
-
-                    rowModel.options.push({
+                    var opt = {
                         value: option.value,
                         label: option.innerHTML,
                         selected: option.selected
-                    });
+                    };
+
+                    if (opt.selected) {
+                        rowModel.selected = opt;
+                    }
+
+                    rowModel.options.push(opt);
                 });
 
                 // Get the accessibility label.

www/core/scss/styles.scss

@@ -581,7 +581,7 @@ mm-navigation-bar {
 
 // When using .item and .row in the same element, .row's padding prevails. Use this class to keep .item's padding.
 .item.row.mm-item-padding {
-  padding: $item-padding;
+  padding: $item-padding / 2;
 }
 
 p.mm-error {
@@ -746,6 +746,28 @@ mm-timer {
   }
 }
 
+.item-select .mm-select-fix {
+  // Taken from .item-select select.
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0 ($item-padding * 3) 0 $item-padding;
+  max-width: 65%;
+  width: 100%;
+  border: none;
+  background: $item-default-bg;
+  color: #333;
+  text-indent: .01px;
+  white-space: nowrap;
+  font-size: $font-size-base;
+  cursor: pointer;
+  direction: rtl; // right align the select text
+
+  pointer-events: none;
+}
+
+
 .item-input-inset .item-input-wrapper input,
 .item-input .item-input-wrapper input {
   width: 100%;
@@ -923,6 +945,7 @@ mm-timer {
 
   .input-label, .mm-textarea {
     padding-left: $item-padding;
+    padding-top: $item-padding/2;
   }
 }