Skip to Content
0

How to apply LayoutData to elements in a FlexBox?

Mar 08 at 10:08 AM

35

avatar image

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

desktop-layout.jpg (21.8 kB)
mobile-layout.jpg (16.3 kB)
messed.jpg (18.8 kB)
grid-messed.jpg (16.9 kB)
10 |10000 characters needed characters left characters exceeded

Hello Maruthi Anil Revankar

Can i see your xml?

0
Nicholas Owen O’Malley

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>

formmessed.jpg (28.3 kB)
0
* Please Login or Register to Answer, Follow or Comment.

0 Answers