Add indent between questions in one line: #65

src/knockout/koquestionbase.ts

@@ -1,31 +1,34 @@
 /// <reference path="../questionbase.ts" />
 module Survey {
     export class QuestionImplementorBase {
-        koVisible: any; koErrors: any; koMarginLeft: any; koRenderWidth: any;
+        koVisible: any; koErrors: any; koMarginLeft: any; koPaddingRight: any; koRenderWidth: any;
         constructor(public question: QuestionBase) {
             var self = this;
             question.visibilityChangedCallback = function () { self.onVisibilityChanged(); };
             question.renderWidthChangedCallback = function () { self.onRenderWidthChanged(); };
             this.koVisible = ko.observable(this.question.visible);
             this.koRenderWidth = ko.observable(this.question.renderWidth);
             this.koErrors = ko.observableArray();
-            this.koMarginLeft = ko.pureComputed(function () {
-                if (self.question.indent < 1) return "";
-                if (!self.question["data"]) return "";
-                var css = self.question["data"]["css"];
-                if (!css) return "";
-                return self.question.indent * css.question.indent + "px";
-            });
+            this.koMarginLeft = ko.pureComputed(function () { return self.getIndentSize(self.question.indent); });
+            this.koPaddingRight = ko.pureComputed(function () { return self.getIndentSize(self.question.rightIndent); }); 
             this.question["koVisible"] = this.koVisible;
             this.question["koRenderWidth"] = this.koRenderWidth;
             this.question["koErrors"] = this.koErrors;
             this.question["koMarginLeft"] = this.koMarginLeft;
+            this.question["koPaddingRight"] = this.koPaddingRight;
         }
         protected onVisibilityChanged() {
             this.koVisible(this.question.visible);
         }
         protected onRenderWidthChanged() {
             this.koRenderWidth(this.question.renderWidth);
         }
+        private getIndentSize(indent: number): string {
+            if (indent < 1) return "";
+            if (!this.question["data"]) return "";
+            var css = this.question["data"]["css"];
+            if (!css) return "";
+            return indent * css.question.indent + "px";
+        }
     }
 }

src/knockout/templates/question.html

@@ -1,5 +1,5 @@
 <script type="text/html" id="survey-question">
-    <div style="vertical-align:top" data-bind="css: $root.css.question.root, style: {display: question.koVisible() ? 'inline-block': 'none', marginLeft: question.koMarginLeft, width: question.koRenderWidth }, attr: {id: id}">
+    <div style="vertical-align:top" data-bind="css: $root.css.question.root, style: {display: question.koVisible() ? 'inline-block': 'none', marginLeft: question.koMarginLeft, paddingRight: question.koPaddingRight, width: question.koRenderWidth }, attr: {id: id}">
         <!-- ko if: question.hasTitle -->
         <h5 data-bind="visible: $root.questionTitleLocation == 'top', text: question.koTitle(), css: $root.css.question.title"></h5>
         <!-- /ko -->
@@ -11,6 +11,8 @@ <h5 data-bind="visible: $root.questionTitleLocation == 'top', text: question.koT
             <div data-bind="text:question.commentText"></div>
             <div data-bind="template: { name: 'survey-comment', data: {'question': question, 'visible': true } }"></div>
         </div>
+        <!-- ko if: question.hasTitle -->
         <h5 data-bind="visible: $root.questionTitleLocation == 'bottom', text: question.koTitle(), css: $root.css.question.title"></h5>
+        <!-- /ko -->
     </div>
 </script>

src/page.ts

@@ -36,6 +36,7 @@ module Survey {
                 if (this.questions[i].visible) {
                     var delta = counter > 0 && counter == visCount - 1 ? 1 : 0;
                     this.questions[i].renderWidth = this.question.width ? this.question.width : (Math.floor(100 / visCount) - delta) + '%';
+                    this.questions[i].rightIndent = counter < visCount - 1 ? 1 : 0;
                     counter++;
                 }
         }

src/questionbase.ts

@@ -15,6 +15,7 @@ module Survey {
         public width: string = "";
         private renderWidthValue: string = "";
         public indent: number = 0;
+        public rightIndent: number = 0;
         focusCallback: () => void;
         renderWidthChangedCallback: () => void;
         rowVisibilityChangedCallback: () => void;

src/react/reactquestion.tsx

@@ -46,9 +46,11 @@ class ReactSurveyQuestion extends React.Component<any, any> {
         var comment = (this.question && this.question.hasComment) ? this.renderComment() : null;
         var errors = this.renderErrors();
         var marginLeft = (this.questionBase.indent > 0) ? this.questionBase.indent * this.css.question.indent + "px" : null;
+        var paddingRight = (this.questionBase.rightIndent > 0) ? this.questionBase.rightIndent * this.css.question.indent + "px" : null;
         var rootStyle = { display: 'inline-block', verticalAlign: 'top' };
         if (this.question.renderWidth) rootStyle["width"] = this.question.renderWidth;
         if (marginLeft) rootStyle["marginLeft"] = marginLeft;
+        if (paddingRight) rootStyle["paddingRight"] = paddingRight;
         return (
             <div id={this.questionBase.id} className={this.css.question.root} style={rootStyle}>
                 {titleTop}

tests/surveytests.ts

@@ -544,7 +544,9 @@ module Survey.Tests {
             assert.equal(page.rows[i].visible, i % 2 == 0 ? true : false, "every second row is visible");
             if (i % 2 == 0) {
                 assert.equal(page.rows[i].questions[0].renderWidth, "50%", "the render width is 50%");
+                assert.equal(page.rows[i].questions[0].rightIndent, 1, "the indent is 1");
                 assert.equal(page.rows[i].questions[1].renderWidth, "49%", "the render width is 50%");
+                assert.equal(page.rows[i].questions[1].rightIndent, 0, "the indent is 0");
             }
         }
     });