add help to input field

scm-ui-components/packages/ui-components/src/Help.js

@@ -8,7 +8,8 @@ const styles = {
     display: "block"
   },
   q: {
-  float: "left"
+    float: "left",
+    paddingLeft: "3px"
   }
 };
 

scm-ui-components/packages/ui-components/src/forms/InputField.js

@@ -1,6 +1,7 @@
 //@flow
 import React from "react";
 import classNames from "classnames";
+import {Help, Page} from "../index";
 
 type Props = {
   label?: string,
@@ -12,7 +13,8 @@ type Props = {
   onReturnPressed?: () => void,
   validationError: boolean,
   errorMessage: string,
-  disabled?: boolean
+  disabled?: boolean,
+  helpText?: string
 };
 
 class InputField extends React.Component<Props> {
@@ -41,6 +43,17 @@ class InputField extends React.Component<Props> {
     return "";
   };
 
+  renderHelp = () => {
+    const helpText = this.props.helpText;
+    if(helpText){
+      return (
+        <div className="control columns is-vcentered">
+          <Help message={helpText} />
+        </div>);
+    }
+    else
+      return null;
+  }
 
   handleKeyPress = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
     const onReturnPressed = this.props.onReturnPressed;
@@ -71,7 +84,8 @@ class InputField extends React.Component<Props> {
     return (
       <div className="field">
         {this.renderLabel()}
-        <div className="control">
+        <div className="field is-grouped">
+          <div className="control is-expanded">
             <input
               ref={input => {
                 this.field = input;
@@ -85,6 +99,8 @@ class InputField extends React.Component<Props> {
               disabled={disabled}
             />
           </div>
+          {this.renderHelp()}
+        </div>
         {helper}
       </div>
     );

scm-ui/src/config/components/form/GeneralSettings.js

@@ -41,6 +41,7 @@ class GeneralSettings extends React.Component<Props> {
           onChange={this.handleRealmDescriptionChange}
           value={realmDescription}
           disabled={!hasUpdatePermission}
+          helpText={"hallo"}
         />
         <InputField
           label={t("general-settings.date-format")}

scm-ui/src/config/containers/Config.js

@@ -39,7 +39,6 @@ class Config extends React.Component<Props> {
 
     return (
       <Page>
-        <Help message={"Hallo"} />
         <div className="columns">
           <div className="column is-three-quarters">
             <Route path={url} exact component={GlobalConfig} />