Implement initial input length property

src/components/Question.jsx

@@ -221,7 +221,9 @@ export default class Question extends React.Component {
       );
       children.push(
         <div key={'row-item-' + i} className={cls} id={question['@id']}>
-          <Answer index={i} answer={answers[i]} question={question} onChange={this.onAnswerChange} />
+          <div className="answer-content" style={this._getAnswerWidthStyle()}>
+            <Answer index={i} answer={answers[i]} question={question} onChange={this.onAnswerChange} />
+          </div>
           {this._renderUnits()}
           {this._renderPrefixes()}
         </div>
@@ -248,6 +250,19 @@ export default class Question extends React.Component {
     return question[Constants.HAS_ANSWER];
   }
 
+  _getAnswerWidthStyle() {
+    const length = Number(this.props.question[Constants.LAYOUT_INITIAL_INPUT_LENGTH]);
+    if (!length) {
+      return {};
+    }
+
+    return {
+      flexGrow: 0,
+      maxWidth: 'none',
+      width: `calc(${length}ch + 1.5rem + 2px)`
+    }
+  }
+
   static _getAnswerClass(question, isTextarea) {
     let columns = isTextarea
       ? 'col-12'

src/constants/Constants.js

@@ -40,6 +40,7 @@ export default class Constants {
     EMPHASISE_ON_RELEVANT: 'emphasise-on-relevant',
     CATEGORY: ['category-1', 'category-2', 'category-3', 'category-4', 'category-5']
   };
+  static LAYOUT_INITIAL_INPUT_LENGTH = 'http://onto.fel.cvut.cz/ontologies/form-layout/initial-input-length';
   static VALUE_TYPE_CODE = 'code';
   static VALUE_TYPE_TEXT = 'text';
   static GENERATED_ROW_SIZE = 1;

src/styles/s-forms.css

@@ -145,17 +145,17 @@ input:disabled {
   background-color: rgba(0, 230, 222, 0.05);
 }
 
-.form-group {
-  flex-grow: 1;
-  max-width: 500px;
-}
-
 .answer {
   display: flex;
   position: relative;
   align-items: center;
 }
 
+.answer > .answer-content {
+  flex-grow: 1;
+  max-width: 500px;
+}
+
 .card-header:first-child {
   line-height: 24px;
 }