title: Mixed editable and no-editable fields in a form
body: <p>I have "BIG" problem  with a form and its fields:
  <img src="https://i.stack.imgur.com/PlU8G.png" alt="enter image description here"></p>
  
  <p>I want have a mixed content: editable and not editable field. If i set <code>editable="true"</code> the allign of the editable fields is correct, instead id I set <code>editable="false"</code> the allign of the not-editable fields is correct.</p>
  
  <p>The code of the controller is:</p>
  
  <pre><code>this.byId("rowDetFormEditContainer").removeAllFormElements();
          for (var i = 0; i &lt; cols.length; i++) {
              var formEl = new sap.ui.layout.form.FormElement();
              formEl.setLabel(cols[i]);
  
  
              //small edit (beni)
              else if((getActualOperationId()=="dettBeniPeriodo"||getActualOperationId()=="dettRettificheBeni")&amp;&amp;(cols[i]=='NOM_DOGANALE')){
                  this.getView().setModel('bene','updateType');
                  if(cols[i]=='NOM_DOGANALE'){
                      var codNomnclList=sap.ui.getCore().getModel('codNomnclList');
                      var field=new sap.m.Input({value : itemToEdit[Object.keys(itemToEdit)[i]]});
                      for(var k=0;k&lt;codNomnclList.beni.length;k++){
                          field.addSuggestionItem(new sap.ui.core.Item().setKey(codNomnclList.beni[k]).setText(codNomnclList.beni[k]));
                          field.setShowSuggestion(true);
                      }
                      formEl.addField(field);
  
                  }else{
                      formEl.addField(new sap.m.Text({text:itemToEdit[Object.keys(itemToEdit)[i]]}));
                  }
  
  
  
              }else{
                  formEl.addField(new sap.m.Text({text:itemToEdit[Object.keys(itemToEdit)[i]]}));
              }
  
              this.byId("rowDetFormEditContainer").addFormElement(formEl);
  
          }
  </code></pre>
  
  <p>and into XML View i write:</p>
  
  <pre><code>&lt;Page id='pageRowDetailEdit' title="Modifica" showNavButton="true" navButtonPress="doBack"&gt;
          &lt;content&gt;
          &lt;l:Grid
              defaultSpan="L12 M12 S12"
              hSpacing="2"
              width="auto"&gt;
              &lt;l:content&gt;
                &lt;f:Form id="FormEdit"
                  minWidth="1024"
                  maxContainerCols="2"
                  editable="false"
                  class="isReadonly"&gt;
                  &lt;f:title&gt;
                    &lt;core:Title text="Modifica" /&gt;
                  &lt;/f:title&gt;
                  &lt;f:layout&gt;
                    &lt;f:ResponsiveGridLayout
                      labelSpanL="3"
                      labelSpanM="3"
                      emptySpanL="4"
                      emptySpanM="4"
                      columnsL="1"
                      columnsM="1" /&gt;
                  &lt;/f:layout&gt;
                   &lt;f:formContainers&gt;
                     &lt;f:FormContainer id="rowDetFormEditContainer"&gt;
  
                    &lt;/f:FormContainer&gt; 
                  &lt;/f:formContainers&gt; 
                &lt;/f:Form&gt;
              &lt;/l:content&gt;
            &lt;/l:Grid&gt;
  
          &lt;/content&gt;
  
          &lt;footer&gt;
            &lt;Bar&gt;
              &lt;contentRight&gt;
                &lt;Button text="Accetta" press="onPressOnAccept" type="Accept" /&gt;
              &lt;/contentRight&gt;
            &lt;/Bar&gt;
          &lt;/footer&gt;
  
  
  
      &lt;/Page&gt;
  </code></pre>