How to apply LayoutData to elements in a FlexBox?

[Former Member]

Hello everyone,

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.

Desktop:

Expected Mobile:

I am able to achieve what is expected on the desktop. However when the same is rendered on the mobile it appears as below.

Actual Mobile:

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.?

I have tried using the Grid Control, but the controls like the Label and Input are placed far away from each other and doesn't seem to render as required on the desktop. Screenshot below.

Thanks

Maruthi

[Former Member]

Hello Maruthi Anil Revankar

Can i see your xml?

[former_member190882]

I tried using the Form control. I could achieve some part of it, but the UI is still messed up. Please find below the code and the screenshot.

<f:Form id="iTLogoSearch" editable="true">
	<f:layout>
		<f:ResponsiveGridLayout adjustLabelSpan="true"/>
	</f:layout>
	<f:formContainers>
		<f:FormContainer>
			<f:formElements>
				<f:FormElement label="{i18n>metadata_objects}">
					<f:fields>
						<Input id="iMetadataSearch" type="Text"/>
						<Button text="{i18n>go}" width="50px" press="onSearchGo"/>
						<Link id="iViewLogsr" text="{i18n>view_logs}" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
							press="onNavigateToViewLogs">
							<layoutData>
								<l:GridData span="XL1 L1 M1 S12"/>
							</layoutData>
						</Link>
						<Link id="iRuntimeInfor" text="{i18n>runtime_info}" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
							press="onRuntimeInfo">
							<layoutData>
								<l:GridData span="XL1 L1 M1 S12"/>
							</layoutData>
						</Link>
						<Link id="iAdvanceSettingsr" text="{i18n>advanced_settings}" href="http://www.sap.com" subtle="true" emphasized="false"
							press="onAdvancedSettings">
							<layoutData>
								<l:GridData span="XL3 L3 M6 S12"/>
							</layoutData>
						</Link>
					</f:fields>
					<f:layoutData>
						<l:GridData span="XL5 L5 M6 S12"/>
					</f:layoutData>
				</f:FormElement>
				<f:FormElement>
					<f:fields>
						<CheckBox id="iTechnicalName" selected="true" enabled="true" name="technicalName" text="{i18n>technical_name}">
							<layoutData>
								<l:GridData span="XL2 L2 M2 S12" indentXL="2" indentL="2" indentM="2"/>
							</layoutData>
						</CheckBox>
						<CheckBox id="iDescription" selected="true" enabled="true" name="description" text="{i18n>description}">
							<layoutData>
								<l:GridData span="XL2 L2 M2 S12"/>
							</layoutData>
						</CheckBox>
						<CheckBox id="iUsedObjects" selected="false" enabled="true" name="usedObjects" text="{i18n>used_objects}">
							<layoutData>
								<l:GridData span="XL2 L2 M2 S12"/>
							</layoutData>
						</CheckBox>
					</f:fields>
				</f:FormElement>
			</f:formElements>
		</f:FormContainer>
	</f:formContainers>
</f:Form>