Fixed issue #6030 : misalign input in multi-line answers / citronade …

…part Dev : fixed some issue with little screen too
LimeSurvey · May 2, 2012 · 07fdca0 · 07fdca0
1 parent 65203f7
commit 07fdca0
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 7 deletions.
diff --git a/templates/citronade/template-rtl.css b/templates/citronade/template-rtl.css
@@ -117,8 +117,25 @@ table.question tbody th.answertext,table.question tbody th.arraycaptionleft{text
 , .list-radio .answers-wrapper ul li
 , .list-radio-flexible .answers-wrapper ul li
 {
-	padding-right:40%;padding-left:0;
+	padding-right:35%;padding-left:0;
 }
+.multiple-opt .answers-wrapper ul li input.checkbox
+, .list-radio .answers-wrapper ul li input.radio
+, .list-radio-flexible .answers-wrapper ul li input.radio
+, .list-with-comment .answers-wrapper ul li input.radio
+{
+margin-left:0;margin-right:-30px;
+}
+@media screen and (max-width: 640px) {
+	.multiple-opt .answers-wrapper ul li
+	, .list-radio .answers-wrapper ul li
+	, .list-with-comment .answers-wrapper ul li 
+	, .list-radio-flexible .answers-wrapper ul li 
+	{
+		padding-right:30px;padding-left:0;
+	}
+}
+
  .text-short input
 ,.text-short textarea
 ,.text-long textarea

diff --git a/templates/citronade/template.css b/templates/citronade/template.css
@@ -740,6 +740,7 @@ table.rank input{border:1px solid #999}
 	padding: 0.5em;
 	margin: 0;
 }
+
 .list-with-comment div.list p
 {
 	margin: 0;
@@ -757,7 +758,15 @@ table.rank input{border:1px solid #999}
 {
 	width: 100%;
 }
-
+@media screen and (max-width: 480px) {
+    .list-with-comment div.list
+    , .list-with-comment p.select
+    , .list-with-comment p.comment
+    {
+	    width: 99%;
+	    float: none;
+    }
+}
  .multiple-opt-comments ul
 ,.multiple-short-txt ul
 ,.numeric-multi ul
@@ -856,19 +865,52 @@ table.rank input{border:1px solid #999}
 	padding: 0.3em 1em 0 0;
 }
 
+
 .multiple-opt .answers-wrapper ul li
 , .list-radio .answers-wrapper ul li
 , .list-radio-flexible .answers-wrapper ul li
 {
-	padding-right:0;padding-left:40%;
+	padding-right:0;padding-left:35%;
+}
+.multiple-opt .answers-wrapper ul li label
+, .list-radio .answers-wrapper ul li label
+, .list-radio-flexible .answers-wrapper ul li label
+, .list-with-comment .answers-wrapper ul li label
+{
+display:inline-block;vertical-align: middle;
+}
+
+.multiple-opt .answers-wrapper ul li input.checkbox
+, .list-radio .answers-wrapper ul li input.radio
+, .list-radio-flexible .answers-wrapper ul li input.radio
+, .list-with-comment .answers-wrapper ul li input.radio
+{
+margin-left:-30px;vertical-align: middle;
+}
+.multiple-opt-comments .answers-wrapper ul li input.checkbox
+{
+/*margin-left:-30px;vertical-align: middle;*//* DON'T WORK */
 }
 @media screen and (max-width: 640px) {
 	.multiple-opt .answers-wrapper ul li
-	, .list-radio .answers ul li
-	, .list-with-comment .answers ul li 
-	, .list-radio-flexible .answers ul li 
+	, .list-radio .answers-wrapper ul li
+	, .list-with-comment .answers-wrapper ul li 
+	, .list-radio-flexible .answers-wrapper ul li 
+	{
+		padding-left:30px;
+	}
+    .multiple-opt-comments  .answers-wrapper ul .comment input
+	    {
+		    width:99%;
+	    }
+}
+@media screen and (max-width: 480px) {
+.numeric-multi .answers-wrapper ul li label, .numeric-multi .answers-wrapper ul li span 
+, .multiple-short-txt .answers-wrapper ul li label, .multiple-short-txt .answers-wrapper ul li span
+, .multiple-opt-comments  .answers-wrapper ul .option, .multiple-opt-comments  .answers-wrapper ul .comment
 	{
-		padding-left:0;
+		display:block;
+		width:99%;
 	}
 }