🐛Fixed list items not aligning to parent (#76)

Rllyyy · Mar 12, 2022 · 4e60c12 · 4e60c12
1 parent 34e1f45
commit 4e60c12
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 11 deletions.
diff --git a/src/Components/Main/Question/Question.css b/src/Components/Main/Question/Question.css
@@ -94,6 +94,12 @@
   max-height: 500px;
 }
 
+/* Targets the markdown list in the question type help */
+.question-type-help ul li,
+.question-type-help ol li{
+  list-style-position: inside;
+}
+
 /* Targets the question-correction section*/
 .question-correction{
   margin: 15px 0 5px 0;

diff --git a/src/Components/Main/Question/QuestionTypes/GapText/GapText.css b/src/Components/Main/Question/QuestionTypes/GapText/GapText.css
@@ -60,6 +60,11 @@
   padding: 0px 10px;
 }
 
+.question-gap-text ul li,
+.question-gap-text li li{
+  list-style-position: inside;
+}
+
 .question-gap-text .input-enabled:focus, .question-gap-text .input-enabled:active{
   box-shadow: 0 0 0 1px var(--custom-prime-color);
 }
@@ -94,6 +99,11 @@
   box-shadow: 0 0 0 1px rgb(194, 149, 144);
 }
 
+.correction-gap-text ul li,
+.correction-gap-text li li{
+  list-style-position: inside;
+}
+
 /* Media Query for phones */
 @media only screen and (max-width: 650px) { 
   .question-gap-text{

diff --git a/src/Components/Main/Question/QuestionTypes/GapTextDropdown/GapTextDropdown.css b/src/Components/Main/Question/QuestionTypes/GapTextDropdown/GapTextDropdown.css
@@ -61,6 +61,14 @@
   padding: 0px 10px;
 }
 
+/* List related */
+.question-gap-text-with-dropdown ol li,
+.question-gap-text-with-dropdown ul li,
+.correction-gap-text-with-dropdown ol li,
+.correction-gap-text-with-dropdown ul li{
+    list-style-position: inside;
+}
+
 /* Correction related */
 .correction-gap-text-with-dropdown p,
 .correction-gap-text-with-dropdown span{
@@ -74,11 +82,11 @@
 
 /* Media Query for Desktop */
 @media (pointer: fine) {
-  .question-gap-text-with-dropdown select:hover{ 
+  .question-gap-text-with-dropdown .select-enabled:hover{ 
     border-color: var(--custom-prime-color);
   }
 
-  .question-gap-text-with-dropdown select:active{
+  .question-gap-text-with-dropdown .select-enabled:active{
     border-color: var(--custom-prime-color);
   }
 }

diff --git a/src/Components/Main/Question/QuestionTypes/MultipleChoice.css b/src/Components/Main/Question/QuestionTypes/MultipleChoice.css
@@ -59,6 +59,14 @@
   max-height: 300px;
 }
 
+/* Style list set with Markdowns html */
+.question-multiple-choice ul li,
+.question-multiple-choice ol li,
+.correction-multipleChoice-list ul li,
+.correction-multipleChoice-list ol li{
+  list-style-position: inside;
+}
+
 /* Media Query for phones */
 @media only screen and (max-width: 650px) { 
   .question-multiple-choice .formControlLabel{ 

diff --git a/src/Components/Main/Question/QuestionTypes/MultipleResponse.css b/src/Components/Main/Question/QuestionTypes/MultipleResponse.css
@@ -26,6 +26,24 @@
   color: grey;
 }
 
+/* Style lists set with react markdown */
+.question-multiple-response ul li,
+.question-multiple-response ol li{
+  list-style-position: inside;
+}
+
+/* Style the image that can be set with MarkDown */
+.question-multiple-response .formControlLabel p img{
+  display: block;
+  font-size: 1rem;
+  object-fit: contain;
+  object-position: left center;
+  width: 100%;
+  max-width: 550px;
+  max-height: 300px;
+}
+
+/* For the correction */
 .correction-multipleResponse-list-item {
   list-style: none;
   position: relative;
@@ -40,15 +58,9 @@
   font-size: 14px;
 }
 
-/* Style the image that can be set with MarkDown */
-.question-multiple-response .formControlLabel p img{
-  display: block;
-  font-size: 1rem;
-  object-fit: contain;
-  object-position: left center;
-  width: 100%;
-  max-width: 550px;
-  max-height: 300px;
+.correction-multipleResponse-list-item  ul li,
+.correction-multipleResponse-list-item  ol li{
+  list-style-position: inside;
 }
 
 /* Media Query for phones */