Fixed issue #6030 : answeroption not left-aligned with multiple-opt-c…

…omments Dev : move input outside label
LimeSurvey · May 4, 2012 · 10593e6 · 10593e6
1 parent ce88cf5
commit 10593e6
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 66 deletions.
diff --git a/qanda.php b/qanda.php
@@ -2805,7 +2805,6 @@ function do_multiplechoice_withcomments($ia)
         $answer_main .= $startitem;
         $answer_main .= "\t$hiddenfield\n";
         $answer_main .= "<span class=\"option\">\n"
-        . "\t<label for=\"answer$myfname\" class=\"answertext\">\n"
         . "\t<input class=\"checkbox\" type=\"checkbox\" name=\"$myfname\" id=\"answer$myfname\" value=\"Y\"";
 
         /* If the question has already been ticked, check the checkbox */
@@ -2818,6 +2817,7 @@ function do_multiplechoice_withcomments($ia)
         }
         $answer_main .=" onclick='cancelBubbleThis(event);$checkconditionFunction(this.value, this.name, this.type);' "
         . " onchange='document.getElementById(\"answer$myfname2\").value=\"\";' />\n"
+        . "\t<label for=\"answer$myfname\" class=\"answertext\">\n"
         . $ansrow['question']."</label>\n";
 
 //        if ($maxansw > 0) {$maxanswscript .= "\tif (document.getElementById('answer".$myfname."').checked) { count += 1; }\n";}
@@ -2830,12 +2830,12 @@ function do_multiplechoice_withcomments($ia)
         }
         $answer_main .= "' />\n";
         $fn++;
-        $answer_main .= "</span>\n<span class=\"comment\">\n\t<label for='answer$myfname2' class=\"answer-comment\">\n"
+        $answer_main .= "</span>\n<span class=\"comment\">\n\t<label for='answer$myfname2' class=\"answer-comment hide\">".$clang->gT("Make a comment on your choice here:")."</label>\n"
         ."<input class='text ".$kpclass."' type='text' size='40' id='answer$myfname2' name='$myfname2' title='".$clang->gT("Make a comment on your choice here:")."' value='";
         if (isset($_SESSION[$myfname2])) {$answer_main .= htmlspecialchars($_SESSION[$myfname2],ENT_QUOTES);}
         // --> START NEW FEATURE - SAVE
 //        $answer_main .= "'  onclick='cancelBubbleThis(event);' onchange='if (jQuery.trim($(\"#answer{$myfname2}\").val())!=\"\") { document.getElementById(\"answer{$myfname}\").checked=true;$checkconditionFunction(document.getElementById(\"answer{$myfname}\").value,\"$myfname\",\"checkbox\");}' onkeyup='".$callmaxanswscriptcheckbox2."(document.getElementById(\"answer{$myfname}\"))' />\n\t</label>\n</span>\n"
-        $answer_main .= "'  onclick='cancelBubbleThis(event);' onchange='if (jQuery.trim($(\"#answer{$myfname2}\").val())!=\"\") { document.getElementById(\"answer{$myfname}\").checked=true;$checkconditionFunction(document.getElementById(\"answer{$myfname}\").value,\"$myfname\",\"checkbox\");}' />\n\t</label>\n</span>\n"
+        $answer_main .= "'  onclick='cancelBubbleThis(event);' onchange='if (jQuery.trim($(\"#answer{$myfname2}\").val())!=\"\") { document.getElementById(\"answer{$myfname}\").checked=true;$checkconditionFunction(document.getElementById(\"answer{$myfname}\").value,\"$myfname\",\"checkbox\");}' />\n</span>\n"
 
         . "\t</li>\n";
         // --> END NEW FEATURE - SAVE

diff --git a/templates/basic/ie_fix_6.css b/templates/basic/ie_fix_6.css
@@ -25,9 +25,9 @@
   text-align: right;
 }
 
-.multiple-opt-comments ul li label {
+.multiple-opt-comments ul li span.option {
   float: left;
-  width: 35%;
+  width: 40%;
   display: block;
   margin: 0;
   padding: 0;
@@ -134,4 +134,4 @@ input.submit {
   position: absolute;
   top: 17px;
   left: 150px;
-}
+}
diff --git a/templates/basic/ie_fix_7.css b/templates/basic/ie_fix_7.css
@@ -21,9 +21,9 @@
   text-align: right;
 }
 
-.multiple-opt-comments ul li label {
+.multiple-opt-comments ul li span.option {
   float: left;
-  width: 35%;
+  width: 40%;
   display: block;
   margin: 0;
   padding: 0;
@@ -108,4 +108,4 @@ input.submit {
 .slider_righttext {
   float: left;
   padding-top: 1.4em;
-}
+}
diff --git a/templates/basic/template.css b/templates/basic/template.css
@@ -571,25 +571,29 @@ ul.cols-8 li,ul.cols-8-ul,table.cols-8 td {
 }
 
 .list-with-comment p.comment {
-  margin: 0%;
+  margin: 0;
   padding: 0.5em;
   text-align: left;
   float: left;
   width: 47%;
+  display:block;
+}
+.list-with-comment p.comment label{
+  display:block;
 }
 
 /* DEFINED ABOVE UNDER "General list styles" - - - - -
 .multiple-opt
 */
-.multiple-opt .answer li input {
+.multiple-opt .answer li input, .multiple-opt-comments .answer li .option input {
   vertical-align: top !important;
   margin-top: 2px;
   margin-top: -2px\9; /* IE9 and below */
 }
 
-.multiple-opt .answer li label {
+.multiple-opt .answer li label, .multiple-opt-comments .answer li .option label {
   display: inline-block;
-  width: 90%;
+  width: 85%;
 }
 
 /* The following styles only apply to modern (relatively) complete CSS2 compliant browsers. (Not less than IE 8) */
@@ -623,8 +627,7 @@ ul.cols-8 li,ul.cols-8-ul,table.cols-8 td {
 }
 
 .multiple-opt-comments ul li span.option {
-  padding: 0.3em 1em 0% 1.8em;
-  text-indent: -1.7em;
+  padding:  0 0 0.5em 0.5em;
   display: table-cell;
   vertical-align: baseline;
 }
@@ -648,7 +651,7 @@ ul.cols-8 li,ul.cols-8-ul,table.cols-8 td {
 
 .multiple-opt-comments ul li span.comment,.multiple-short-txt ul li span,.numeric-multi ul li span
   {
-  padding: 0.3em 0% 0% 1em;
+  padding: 0.3em 0 0 1em;
   display: table-cell;
   vertical-align: baseline;
   white-space: nowrap;

diff --git a/templates/bluengrey/template.css b/templates/bluengrey/template.css
@@ -734,26 +734,26 @@ ul.cols-2-ul label,ul.cols-3-ul label,ul.cols-4-ul label,ul.cols-5-ul label,ul.c
 /* DEFINED ABOVE UNDER "General list styles" - - - - -
 .multiple-opt
 */
-.multiple-opt .answers li input {
+.multiple-opt .answers li input, .multiple-opt-comments .answers li .option input {
   vertical-align: top !important;
   margin-top: 2px;
 }
 
-.multiple-opt .answers li label {
+.multiple-opt .answers li label, .multiple-opt-comments .answers li .option label {
   display: inline-block;
-  width: 90%;
+  width: 85%;
 }
 
 /* The following styles only apply to modern (relatively) complete CSS2 compliant browsers. (Not less than IE 8) */
-.multiple-opt-comments td.answer,.multiple-short-txt td.answer,.numeric-multi td.answer
+.multiple-opt-comments td.answers,.multiple-short-txt td.answers,.numeric-multi td.answers
   {
 
 }
 
 .multiple-opt-comments ul,.multiple-short-txt ul,.numeric-multi ul,.numeric-multi.slider ul
   {
   display: table;
-  padding: 0%;
+  padding: 0;
   margin: 1em;
 }
 
@@ -785,9 +785,7 @@ ul.cols-2-ul label,ul.cols-3-ul label,ul.cols-4-ul label,ul.cols-5-ul label,ul.c
 }
 
 .multiple-opt-comments ul li span.option {
-  padding: 0.3em 1em 0 1em;
-  padding-left:1.5em;padding-right:1em;
-  text-indent: -1.5em;
+  padding: 0 0 0.3em 0.5em;
   display: table-cell;
   vertical-align: baseline;
 }

diff --git a/templates/citronade/template.css b/templates/citronade/template.css
@@ -661,13 +661,7 @@ table.question tbody td.ddarrayseparator{border-top-width: 0px;}
 	padding: 0 1em 0 0;
 	text-align:left;
 }
- .choice-5-pt-radio .answers-wrapper li
-,.list-radio-flexible .answers-wrapper li
-,.list-radio .answers-wrapper li
-,.list-with-comment .answers-wrapper li
-{
-	margin-right:0;margin-left: 3em;
-}
+
 @media screen and (max-width: 640px) {
 	 .choice-5-pt-radio .answers-wrapper li
 	,.list-radio-flexible .answers-wrapper li
@@ -873,26 +867,32 @@ table.rank input{border:1px solid #999}
 	padding-right:0;padding-left:35%;
 }
 .multiple-opt .answers-wrapper ul li label
+, .multiple-opt-comments .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-comments .answers-wrapper ul li .option
+, .list-with-comment .answers-wrapper ul li
+{
+padding-left:30px;
+}
+
 .multiple-opt .answers-wrapper ul li input.checkbox
+, .multiple-opt-comments .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
+	.multiple-opt-comments .answers-wrapper ul li
 	, .list-radio .answers-wrapper ul li
 	, .list-with-comment .answers-wrapper ul li 
 	, .list-radio-flexible .answers-wrapper ul li 

diff --git a/templates/clear_logo/template.css b/templates/clear_logo/template.css
@@ -600,13 +600,13 @@ ul.cols-8 li,ul.cols-8-ul,table.cols-8 td {
 /* DEFINED ABOVE UNDER "General list styles" - - - - -
 .multiple-opt
 */
-.multiple-opt .answer li input {
+.multiple-opt .answer li input, .multiple-opt-comments .answer li .option input {
   vertical-align: top !important;
   margin-top: 2px;
   margin-top: -2px\9; /* IE9 and below */
 }
 
-.multiple-opt .answer li label {
+.multiple-opt .answer li label, .multiple-opt-comments .answer li .option label {
   display: inline-block;
   width: 90%;
 }

diff --git a/templates/default/ie_fix_6.css b/templates/default/ie_fix_6.css
@@ -25,9 +25,9 @@
   text-align: right;
 }
 
-.multiple-opt-comments ul li label {
+.multiple-opt-comments ul li  span.option {
   float: left;
-  width: 35%;
+  width: 40%;
   display: block;
   margin: 0;
   padding: 0;
@@ -136,4 +136,4 @@ input.submit {
   position: absolute;
   top: 15px;
   left: 150px;
-}
+}
diff --git a/templates/default/ie_fix_7.css b/templates/default/ie_fix_7.css
@@ -25,9 +25,9 @@
   text-align: right;
 }
 
-.multiple-opt-comments ul li label {
+.multiple-opt-comments ul li  span.option {
   float: left;
-  width: 35%;
+  width: 40%;
   display: block;
   margin: 0;
   padding: 0;
@@ -116,4 +116,4 @@ input.submit {
 .slider_righttext {
   float: left;
   padding-top: 1.4em;
-}
+}
diff --git a/templates/default/template.css b/templates/default/template.css
@@ -811,15 +811,15 @@ ul.cols-8 li,ul.cols-8-ul,table.cols-8 td {
 /* DEFINED ABOVE UNDER "General list styles" - - - - -
 .multiple-opt
 */
-.multiple-opt .answer li input {
+.multiple-opt .answer li input, .multiple-opt-comments .answer li .option input {
   vertical-align: top !important;
   margin-top: 2px;
   *margin-top: -2px; /* IE7 and below */
 }
 
-.multiple-opt .answer li label {
+.multiple-opt .answer li label, .multiple-opt-comments .answer li .option label {
   display: inline-block;
-  width: 90%;
+  width: 85%;
 }
 
 /* The following styles only apply to modern (relatively) complete CSS2 compliant browsers. (Not less than IE 8) */

diff --git a/templates/eirenicon/template.css b/templates/eirenicon/template.css
@@ -704,13 +704,13 @@ table.rank td.helptext {
 /* DEFINED ABOVE UNDER "General list styles" - - - - -
 .multiple-opt
 */
-.multiple-opt .question-answer li input {
+.multiple-opt .question-answer li input, .multiple-opt-comments .question-answer li .option input {
   vertical-align: top !important;
   margin-top: 1px;
   margin-top: -3px\9; /* IE9 and below */
 }
 
-.multiple-opt .question-answer li label {
+.multiple-opt .question-answer li label, .multiple-opt-comments .question-answer li .option label {
   display: inline-block;
   width: 90%;
 }
@@ -746,8 +746,7 @@ table.rank td.helptext {
 }
 
 .multiple-opt-comments ul li span.option {
-  padding: 0.3em 1em 0 2.3em;
-  text-indent: -2.3em;
+  padding: 0 0 0.5em 0.5em;
   display: table-cell;
   vertical-align: baseline;
 }

diff --git a/templates/limespired/template.css b/templates/limespired/template.css
@@ -782,13 +782,13 @@ ul.cols-8 li,ul.cols-8-ul,table.cols-8 td {
 /* DEFINED ABOVE UNDER "General list styles" - - - - -
 .multiple-opt
 */
-.multiple-opt .survey-question-answer li input {
+.multiple-opt .survey-question-answer li input, .multiple-opt-comments .survey-question-answer li .option input {
   vertical-align: top !important;
   margin-top: 2px;
   margin-top: -1px\9; /* IE9 and below */
 }
 
-.multiple-opt .survey-question-answer li label {
+.multiple-opt .survey-question-answer li label, .multiple-opt-comments .survey-question-answer li .option label {
   display: inline-block;
   width: 90%;
 }
@@ -824,8 +824,7 @@ ul.cols-8 li,ul.cols-8-ul,table.cols-8 td {
 }
 
 .multiple-opt-comments ul li span.option {
-  padding: 0.3em 1em 0 2em;
-  text-indent: -1.5em;
+  padding: 0 0 0.5em 0.5em;
   display: table-cell;
   vertical-align: baseline;
 }

diff --git a/templates/mint_idea/template.css b/templates/mint_idea/template.css
@@ -843,16 +843,19 @@ table.rank td.helptext {
 /* DEFINED ABOVE UNDER "General list styles" - - - - -
 .multiple-opt
 */
-.multiple-opt .survey-question-answer li input {
+.multiple-opt .survey-question-answer li input, .multiple-opt-comments .survey-question-answer li .option input {
   vertical-align: top !important;
   margin-top: 5px;
   *margin-top: 2px; /* IE7and below */
 }
 
-.multiple-opt .survey-question-answer li label {
+.multiple-opt .survey-question-answer li label, .multiple-opt-comments .survey-question-answer li .option label {
   display: inline-block;
   width: 90%;
 }
+.multiple-opt-comments .survey-question-answer li .option label {
+  width: 85%;
+}
 
 /* The following styles only apply to modern (relatively) complete CSS2 compliant browsers. (Not less than IE 8) */
 .multiple-opt-comments td.answer,.multiple-short-txt td.answer,.numeric-multi td.answer
@@ -885,8 +888,7 @@ table.rank td.helptext {
 }
 
 .multiple-opt-comments ul li span.option {
-  padding: 0.3em 1em 0 1.8em;
-  text-indent: -1.8em;
+  padding: 0 0 0.5em 0.5em;
   display: table-cell;
   vertical-align: baseline;
 }
@@ -916,6 +918,11 @@ table.rank td.helptext {
   white-space: nowrap;
 }
 
+.multiple-opt-comments ul li span.comment,.multiple-short-txt ul li span,.numeric-multi ul li span
+  {
+  vertical-align: top;
+}
+
 .multiple-opt-comments ul li span {
   padding: 0.3em 1em 0 0;
 }