title: UI5 Simpleform Field Layout
body: <p>I am having a bit of trouble setting a layout in a SimpleForm control. Here is the XML code:</p>
  
  <pre><code>&lt;f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers"&gt;
      &lt;f:content&gt;
          &lt;Toolbar&gt;
              &lt;ToolbarSpacer/&gt;
              &lt;Button icon="sap-icon://phone" tooltip="Client Numbers"/&gt;
          &lt;/Toolbar&gt;
          &lt;Title text="Business Phone" level="H5" titleStyle="H5"/&gt;
          &lt;Label text="Number" design="Bold"&gt;
              &lt;layoutData&gt;
                  &lt;l:GridData span="XL2 L2 M2 S6"/&gt;
              &lt;/layoutData&gt;
          &lt;/Label&gt;
          &lt;MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
              placeholderSymbol="_"&gt;
              &lt;rules&gt;
                  &lt;MaskInputRule maskFormatSymbol="C" regex="[0-9]"/&gt;
              &lt;/rules&gt;
              &lt;layoutData&gt;
                  &lt;l:GridData span="XL4 L4 M4 S6"/&gt;
              &lt;/layoutData&gt;
          &lt;/MaskInput&gt;
          &lt;Label text="Business Extension" design="Bold"&gt;
              &lt;layoutData&gt;
                  &lt;l:GridData span="XL2 L2 M2 S6"/&gt;
              &lt;/layoutData&gt;
          &lt;/Label&gt;
          &lt;Input id="businessPhoneExtension" value="{business_phone_extension}"&gt;
              &lt;layoutData&gt;
                  &lt;l:GridData span="XL4 L4 M4 S6"/&gt;
              &lt;/layoutData&gt;
          &lt;/Input&gt;
          &lt;Title text="Business Fax" level="H5"/&gt;
          &lt;Label text="Number" design="Bold"&gt;
              &lt;layoutData&gt;
                  &lt;l:GridData span="XL2 L2 M2 S6"/&gt;
              &lt;/layoutData&gt;
          &lt;/Label&gt;
          &lt;MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_"&gt;
              &lt;rules&gt;
                  &lt;MaskInputRule maskFormatSymbol="C" regex="[0-9]"/&gt;
              &lt;/rules&gt;
              &lt;layoutData&gt;
                  &lt;l:GridData span="XL4 L4 M4 S6"/&gt;
              &lt;/layoutData&gt;
          &lt;/MaskInput&gt;
      &lt;/f:content&gt;
  &lt;/f:SimpleForm&gt;
  </code></pre>
  
  <p>I want the third field (Business Fax) to be displayed underneath the 'Business Phone' field. Instead, it displays as such:</p>
  
  <p><a href="https://i.stack.imgur.com/LmxBM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LmxBM.png" alt="Phone form layout"></a></p>
  
  <p>I'm sure I am missing something simple. Perhaps I need to use the 'Form' control instead? I tried putting an empty label as the next element, but that didn't seem to work, either. If there was a fourth field (i.e Business Fax Extension), then the layout would line up. </p>
  
  <p>Any help would be appreciated! Thanks!</p>
  
  <p>UPDATE:</p>
  
  <p>I have taken the advice given in the answers. I was able to get the layout to work a little better, though still not quite what I want. This will probably suffice:</p>
  
  <p><a href="https://i.stack.imgur.com/rOvLc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rOvLc.png" alt="Phone Form Layout 2"></a></p>
  
  <p>I added the 'core:Title' to both 'groups', though I still noticed some oddities in the layout. I removed the 'GridData' tags and I ended up with what's in the image above. I also played around with using a 'Toolbar', which had the same effect. I tried using 'core:Toolbar', but it complained that library did not exist, despite the documentation showing 'core:Toolbar' as an aggregation of the SimpleForm control. Here is the final code:</p>
  
  <pre><code>&lt;f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers"&gt;
      &lt;f:content&gt;
          &lt;core:Title text="Business Phone"/&gt;
          &lt;Label text="Number" design="Bold"/&gt;
          &lt;MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
              placeholderSymbol="_"&gt;
              &lt;rules&gt;
                  &lt;MaskInputRule maskFormatSymbol="C" regex="[0-9]"/&gt;
              &lt;/rules&gt;
          &lt;/MaskInput&gt;
          &lt;Label text="Business Extension" design="Bold"/&gt;
          &lt;Input id="businessPhoneExtension" value="{business_phone_extension}"/&gt;
          &lt;core:Title text="Business Fax"/&gt;
          &lt;Label text="Number" design="Bold"/&gt;
          &lt;MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_"&gt;
              &lt;rules&gt;
                  &lt;MaskInputRule maskFormatSymbol="C" regex="[0-9]"/&gt;
              &lt;/rules&gt;
          &lt;/MaskInput&gt;
      &lt;/f:content&gt;
  &lt;/f:SimpleForm&gt;
  </code></pre>
  
  <p>Thanks for your answers! If there is any other way to have the layout like I originally wanted, additional input would be great!</p>
  
  <p><a href="https://i.stack.imgur.com/U8fEY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U8fEY.png" alt="Phone form 3"></a></p>