Fix the bug on changing rightIndent property. Tells question to adjust it's padding correctly.

Author: andrewtelnov

src/knockout/koquestionbase.ts

@@ -9,8 +9,8 @@ module Survey {
             this.koVisible = ko.observable(this.question.visible);
             this.koRenderWidth = ko.observable(this.question.renderWidth);
             this.koErrors = ko.observableArray();
-            this.koMarginLeft = ko.pureComputed(function () { return self.getIndentSize(self.question.indent); });
-            this.koPaddingRight = ko.pureComputed(function () { return self.getIndentSize(self.question.rightIndent); }); 
+            this.koMarginLeft = ko.pureComputed(function () { self.koRenderWidth(); return self.getIndentSize(self.question.indent); });
+            this.koPaddingRight = ko.observable(self.getIndentSize(self.question.rightIndent)); 
             this.question["koVisible"] = this.koVisible;
             this.question["koRenderWidth"] = this.koRenderWidth;
             this.question["koErrors"] = this.koErrors;
@@ -22,6 +22,7 @@ module Survey {
         }
         protected onRenderWidthChanged() {
             this.koRenderWidth(this.question.renderWidth);
+            this.koPaddingRight(this.getIndentSize(this.question.rightIndent)); 
         }
         private getIndentSize(indent: number): string {
             if (indent < 1) return "";

src/questionbase.ts

@@ -16,8 +16,8 @@ module Survey {
         private visibleIndexValue: number = -1;
         public width: string = "";
         private renderWidthValue: string = "";
+        private rightIndentValue: number = 0;
         public indent: number = 0;
-        public rightIndent: number = 0;
         focusCallback: () => void;
         renderWidthChangedCallback: () => void;
         rowVisibilityChangedCallback: () => void;
@@ -50,6 +50,12 @@ module Survey {
             this.renderWidthValue = val;
             this.fireCallback(this.renderWidthChangedCallback);
         }
+        public get rightIndent(): number { return this.rightIndentValue; }
+        public set rightIndent(val: number) {
+            if (val == this.rightIndent) return;
+            this.rightIndentValue = val;
+            this.fireCallback(this.renderWidthChangedCallback);
+        }
         public focus() {
             var el = document.getElementById(this.id);
             if (!el || !el.scrollIntoView) return;

src/react/reactquestion.tsx

@@ -32,7 +32,14 @@ class ReactSurveyQuestion extends React.Component<any, any> {
         this.questionBase = question;
         this.question = question instanceof Survey.Question ? question : null;
         var value = this.question ? this.question.value : null;
-        this.state = { visible: this.questionBase.visible, value: value, error: 0 };
+        this.state = { visible: this.questionBase.visible, value: value, error: 0, renderWidth: 0 };
+        var self = this;
+        if (this.questionBase) {
+            this.questionBase.renderWidthChangedCallback = function () {
+                self.state.renderWidth = self.state.renderWidth + 1;
+                self.setState(self.state);
+            }
+        }
     }
     render(): JSX.Element {
         if (!this.questionBase || !this.creator) return null;