title: How to apply LayoutData to elements in a FlexBox?
body: <p>I have a Label, Input field, Button and 3 Link controls which have to appear in-line on desktop and one below the other on mobile screen, as shown in the pictures below.</p>
  
  <p>Desktop:</p>
  
  <p><a href="https://i.stack.imgur.com/uQyuC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uQyuC.jpg" alt="enter image description here"></a></p>
  
  <p>Expected Mobile:</p>
  
  <p><a href="https://i.stack.imgur.com/CoksY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CoksY.jpg" alt="enter image description here"></a></p>
  
  <p>I am able to achieve what is expected on the desktop. However when the same is rendered on the mobile it appears as below.</p>
  
  <p>Actual Mobile:</p>
  
  <p><a href="https://i.stack.imgur.com/UGiew.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UGiew.jpg" alt="enter image description here"></a></p>
  
  <p>I have used Flexbox to align the controls as required, wherein the LayoutData for the controls within the FlexBox doesn't appear to work. Can anyone help me to get the LayoutData applied to the controls.?</p>
  
  <p>Here is the code using FlexBox</p>
  
  <pre><code>&lt;mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"&gt;
  &lt;App&gt;
      &lt;pages&gt;
          &lt;Page showHeader="false" enableScrolling="true"&gt;
              &lt;content&gt;
                  &lt;OverflowToolbar active="false" enabled="true" height="5%" design="Auto" class="bwsearchMaintainToolbar"&gt;
                      &lt;content&gt;
                          &lt;ToolbarSpacer/&gt;
                          &lt;ToolbarSpacer/&gt;
                          &lt;Link text="Search Maintenance" href="http://www.sap.com" subtle="true" emphasized="false" press="onNavigateToSearchMaintenance"&gt;&lt;/Link&gt;
                          &lt;Button icon="sap-icon://action" press="onExport" tooltip="Export" type="Transparent"&gt;&lt;/Button&gt;
                      &lt;/content&gt;
                  &lt;/OverflowToolbar&gt;
                  &lt;IconTabBar id="iSearchIconTabBar" selectedKey="searchObjects" stretchContentHeight="false" applyContentPadding="true"
                      backgroundDesign="Solid" headerMode="Standard" showOverflowSelectList="false" headerBackgroundDesign="Solid" enableTabReordering="false"
                      select="onSearchObjects"&gt;
                      &lt;items&gt;
                          &lt;IconTabFilter text="Search Objects" key="searchObjects" tooltip="{i18n&gt;search_objects}"&gt;
                              &lt;content&gt;
                                  &lt;FlexBox justifyContent="Center" alignItems="Center" wrap="Wrap" alignContent="Stretch" backgroundDesign="Transparent"&gt;
                                      &lt;items&gt;
                                          &lt;FlexBox height="" width="" displayInline="false" direction="Row" fitContainer="false" renderType="Div" justifyContent="Center"
                                              alignItems="Center" wrap="Wrap" alignContent="Stretch" backgroundDesign="Transparent"&gt;
                                              &lt;items&gt;
                                                  &lt;Label text="Metadata Objects:" labelFor="iMetadataSearch" class="sapUiSmallMarginEnd"/&gt;
                                                  &lt;Input id="iMetadataSearchr" type="Text" class="sapUiSmallMarginEnd"/&gt;
                                                  &lt;Button text="Go" press="onSearchGo" class="sapUiSmallMarginBegin"/&gt;
                                              &lt;/items&gt;
                                          &lt;/FlexBox&gt;
                                          &lt;FlexBox height="" width="" displayInline="false" direction="Row" fitContainer="false" renderType="Div" justifyContent="End"
                                              alignItems="Center" wrap="Wrap" alignContent="Stretch" backgroundDesign="Transparent" class="bwUiLargeMarginBegin"&gt;
                                              &lt;items&gt;
                                                  &lt;Link id="iViewLogs" text="View Logs" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
                                                      press="onNavigateToViewLogs" class="bwUiLargeMarginBegin sapUiSmallMarginEnd"&gt;&lt;/Link&gt;
                                                  &lt;Link id="iRuntimeInfo" text="Runime Info" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
                                                      press="onRuntimeInfo" class="sapUiSmallMarginEnd"&gt;&lt;/Link&gt;
                                                  &lt;Link id="iAdvanceSettings" text="Advance settings" href="http://www.sap.com" subtle="true" emphasized="false"
                                                      press="onAdvancedSettings"&gt;&lt;/Link&gt;
                                              &lt;/items&gt;
                                          &lt;/FlexBox&gt;
                                      &lt;/items&gt;
                                  &lt;/FlexBox&gt;
                                  &lt;FlexBox height="" width="" displayInline="false" direction="Row" fitContainer="false" renderType="Div" justifyContent="Center"
                                      alignItems="Center" wrap="Wrap" alignContent="Stretch" backgroundDesign="Transparent"&gt;
                                      &lt;items&gt;
                                          &lt;CheckBox id="iTechnicalNamer" selected="true" enabled="true" name="technicalName" text="Technical Name"&gt;
                                              &lt;layoutData&gt;
                                                  &lt;l:GridData span="L4 M6 S12"/&gt;
                                              &lt;/layoutData&gt;
                                          &lt;/CheckBox&gt;
                                          &lt;CheckBox id="iDescriptionr" selected="true" enabled="true" name="description" text="Description"&gt;
                                              &lt;layoutData&gt;
                                                  &lt;l:GridData span="L4 M6 S12"/&gt;
                                              &lt;/layoutData&gt;
                                          &lt;/CheckBox&gt;
                                          &lt;CheckBox id="iUsedObjectsr" selected="false" enabled="true" name="usedObjects" text="Used Objects"&gt;
                                              &lt;layoutData&gt;
                                                  &lt;l:GridData span="L4 M6 S12"/&gt;
                                              &lt;/layoutData&gt;
                                          &lt;/CheckBox&gt;
                                      &lt;/items&gt;
                                  &lt;/FlexBox&gt;
                              &lt;/content&gt;
                          &lt;/IconTabFilter&gt;
                          &lt;IconTabFilter text="Search Where Used" key="searchWhereUsed" tooltip="Search Where Used"&gt;
                              &lt;content&gt;&lt;/content&gt;
                          &lt;/IconTabFilter&gt;
                      &lt;/items&gt;
                  &lt;/IconTabBar&gt;
              &lt;/content&gt;
          &lt;/Page&gt;
      &lt;/pages&gt;
  &lt;/App&gt;
  </code></pre>
  
  <p>And the one using Form is here,</p>
  
  <pre><code>&lt;mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"&gt;
  &lt;App&gt;
      &lt;pages&gt;
          &lt;Page showHeader="false" enableScrolling="true"&gt;
              &lt;content&gt;
                  &lt;OverflowToolbar active="false" enabled="true" height="5%" design="Auto" class="bwsearchMaintainToolbar"&gt;
                      &lt;content&gt;
                          &lt;ToolbarSpacer/&gt;
                          &lt;ToolbarSpacer/&gt;
                          &lt;Link text="Search Maintenance" href="http://www.sap.com" subtle="true" emphasized="false" press="onNavigateToSearchMaintenance"&gt;&lt;/Link&gt;
                          &lt;Button icon="sap-icon://action" press="onExport" tooltip="Export" type="Transparent"&gt;&lt;/Button&gt;
                      &lt;/content&gt;
                  &lt;/OverflowToolbar&gt;
                  &lt;IconTabBar id="iSearchIconTabBar" selectedKey="searchObjects" stretchContentHeight="false" applyContentPadding="true"
                      backgroundDesign="Solid" headerMode="Standard" showOverflowSelectList="false" headerBackgroundDesign="Solid" enableTabReordering="false"
                      select="onSearchObjects"&gt;
                      &lt;items&gt;
                          &lt;IconTabFilter text="Search Objects" key="searchObjects" tooltip="{i18n&gt;search_objects}"&gt;
                              &lt;content&gt;
                                  &lt;f:Form id="iTLogoSearch" editable="true"&gt;
                                      &lt;f:layout&gt;
                                          &lt;f:ResponsiveGridLayout adjustLabelSpan="true"/&gt;
                                      &lt;/f:layout&gt;
                                      &lt;f:formContainers&gt;
                                          &lt;f:FormContainer&gt;
                                              &lt;f:formElements&gt;
                                                  &lt;f:FormElement&gt;
                                                      &lt;f:label&gt;
                                                          &lt;Label text="Metadata Objects"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL4 L4 M6 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/Label&gt;
                                                      &lt;/f:label&gt;
                                                      &lt;f:fields&gt;
                                                          &lt;Input id="iMetadataSearch" type="Text" placeholder="Search"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL2 L2 M6 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/Input&gt;
                                                          &lt;Button text="Go" width="50px" press="onSearchGo"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL1 L1 M1 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/Button&gt;
                                                          &lt;ToolbarSpacer&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL1 L1 M6 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/ToolbarSpacer&gt;
                                                          &lt;Link id="iViewLogsr" text="View Logs" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
                                                              press="onNavigateToViewLogs"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL1 L1 M1 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/Link&gt;
                                                          &lt;Link id="iRuntimeInfor" text="Runtime Info" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
                                                              press="onRuntimeInfo"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL1 L1 M1 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/Link&gt;
                                                          &lt;Link id="iAdvanceSettingsr" text="Advanced Settings" href="http://www.sap.com" subtle="true" emphasized="false"
                                                              press="onAdvancedSettings"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL2 L2 M6 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/Link&gt;
                                                      &lt;/f:fields&gt;
                                                  &lt;/f:FormElement&gt;
                                                  &lt;f:FormElement&gt;
                                                      &lt;f:fields&gt;
                                                          &lt;ToolbarSpacer&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL1 L1 M6 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/ToolbarSpacer&gt;
                                                          &lt;CheckBox id="iTechnicalName" selected="true" enabled="true" name="technicalName" text="Technical Name"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL2 L2 M2 S12" indentXL="2" indentL="2" indentM="2"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/CheckBox&gt;
                                                          &lt;CheckBox id="iDescription" selected="true" enabled="true" name="description" text="Description"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL2 L2 M2 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/CheckBox&gt;
                                                          &lt;CheckBox id="iUsedObjects" selected="false" enabled="true" name="usedObjects" text="Used Objects"&gt;
                                                              &lt;layoutData&gt;
                                                                  &lt;l:GridData span="XL2 L2 M2 S12"/&gt;
                                                              &lt;/layoutData&gt;
                                                          &lt;/CheckBox&gt;
                                                      &lt;/f:fields&gt;
                                                  &lt;/f:FormElement&gt;
                                              &lt;/f:formElements&gt;
                                          &lt;/f:FormContainer&gt;
                                      &lt;/f:formContainers&gt;
                                  &lt;/f:Form&gt;
                              &lt;/content&gt;
                          &lt;/IconTabFilter&gt;
                          &lt;IconTabFilter text="Search Where Used" key="searchWhereUsed" tooltip="Search Where Used"&gt;
                              &lt;content&gt;&lt;/content&gt;
                          &lt;/IconTabFilter&gt;
                      &lt;/items&gt;
                  &lt;/IconTabBar&gt;
              &lt;/content&gt;
          &lt;/Page&gt;
      &lt;/pages&gt;
  &lt;/App&gt;
  </code></pre>
  
  <p></p>