From 1f7bb3a50d4841d8129e4c4783410eb7a66ed27d Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Thu, 8 Dec 2022 10:09:11 +0700 Subject: [PATCH] MDL-75965 question_multichoice: Misalignment of feedback icons --- question/type/multichoice/renderer.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/question/type/multichoice/renderer.php b/question/type/multichoice/renderer.php index e6516b81a6b..6428d0d2c67 100644 --- a/question/type/multichoice/renderer.php +++ b/question/type/multichoice/renderer.php @@ -133,7 +133,11 @@ abstract class qtype_multichoice_renderer_base extends qtype_with_combined_feedb } $class = 'r' . ($value % 2); if ($options->correctness && $isselected) { - $feedbackimg[] = $this->feedback_image($this->is_right($ans)); + // Feedback images will be rendered using Font awesome. + // Font awesome icons are actually characters(text) with special glyphs, + // so the icons cannot be aligned correctly even if the parent div wrapper is using align-items: flex-start. + // To make the Font awesome icons follow align-items: flex-start, we need to wrap them inside a span tag. + $feedbackimg[] = html_writer::span($this->feedback_image($this->is_right($ans)), 'ml-1'); $class .= ' ' . $this->feedback_class($this->is_right($ans)); } else { $feedbackimg[] = '';