Add styling for correct-answer badge to allow text wrapping

This commit is contained in:
Ross
2025-10-26 21:08:19 +00:00
parent 9c68c4ff1c
commit 4f72de6be9
2 changed files with 8 additions and 1 deletions
+1 -1
View File
@@ -90,7 +90,7 @@
{% if question.e_feedback %}<div class="small text-muted mt-1">Feedback: <em>{{ question.e_feedback|safe }}</em></div>{% endif %} {% if question.e_feedback %}<div class="small text-muted mt-1">Feedback: <em>{{ question.e_feedback|safe }}</em></div>{% endif %}
</li> </li>
</ol> </ol>
<div class="mt-2">Correct: <span class="badge bg-success text-white fs-5 py-2 px-3 rounded-pill">{{ question.get_correct_answer_stripped }}</span></div> <div class="mt-2">Correct: <span class="badge bg-success text-white fs-5 py-2 px-3 rounded-pill correct-badge">{{ question.get_correct_answer_stripped }}</span></div>
{% endautoescape %} {% endautoescape %}
</div> </div>
+7
View File
@@ -85,6 +85,13 @@
.dropdown-item { .dropdown-item {
color: lightblue; color: lightblue;
} }
/* Allow the correct-answer badge to wrap if the text is long */
.correct-badge {
white-space: normal !important;
display: inline-block;
word-break: break-word;
max-width: 100%;
}
</style> </style>
{% block css %} {% block css %}
{% endblock %} {% endblock %}