Fixes small screen issues with long quiz questions in New UI

fixes: CNVS-26411

When taking a quiz on a lower-resolution screen, the quiz questions
would get cut off. Now it either wraps so the whole question is visible,
or if the screen is really really small, scrolls horizonally

Test Plan:
- Create a quiz with some long quiz questions
- Make your browser window small <=1024px wide
- Quiz questions should now be readable whether they're wrapped or allow
you to scroll horizontally
- Go to Edit a quiz, notice the quiz question adhering to the container
width (no more overlap with righthand sidebar)
- Legacy UI should remain as it was before, this only should affect
New UI

Change-Id: Icf0053e0a79cf2db37183f889f844f1ffd60f9b0
Reviewed-on: https://gerrit.instructure.com/71293
Reviewed-by: Pam Hiett <phiett@instructure.com>
Product-Review: Pam Hiett <phiett@instructure.com>
Tested-by: Jenkins
QA-Review: KC Naegle <knaegle@instructure.com>
This commit is contained in:
Colleen Palmer 2016-02-02 10:30:58 -07:00
parent 3cfeb24072
commit f8605f3a2d
1 changed files with 7 additions and 3 deletions

View File

@ -221,8 +221,10 @@ li.quiz {
}
#submit_quiz_form {
.question_holder {
overflow: hidden;
@if not $use_new_styles {
.question_holder {
overflow: hidden;
}
}
.button-container .btn, #submit_quiz_button {
min-width: 120px;
@ -576,7 +578,9 @@ li.quiz {
background-color: #fff;
position: relative;
min-height: 50px;
min-width: 515px;
@if not $use_new_styles {
min-width: 515px;
}
margin: 0.7em auto 30px auto;
_height: 10px;
&.modified_but_not_saved {