Split screen vertically into two parts in 7:3 ratio.

[Ajinkya_Jadhav]

Hello Experts,

I want to split the screen vertically into two parts in 7:3 ratio.

The first part should have 70% of the screen area and second part should have 30% of the area.

Something like shown in the below image.

I have checked with sap.ui.layout.Splitter and sap.ui.layout.ResponsiveSplitter but both divide the page in 50% and 50%.

Below is the code for Responsive Splitter, I used the similar code for Splitter but I did not found any property which can define the vertical sizes.

<l:ResponsiveSplitter defaultPane="default">
		<l:PaneContainer orientation="Vertical">
		<l:SplitPane>
			<Panel width="auto"  class="sapUiResponsiveMargin" accessibleRole="Region">
			<!--	<headerToolbar>
					<OverflowToolbar>
						<Title text="Map" />
						
					</OverflowToolbar>
				</headerToolbar>-->
			<content>
			<table:Table id="tbl1" selectionMode="Single" visibleRowCount="4" visibleRowCountMode="Fixed"
						filter="filterPrice" ariaLabelledBy="title"    selectionBehavior="RowOnly" 
						enableSelectAll="false" rowSelectionChange="onRowsDataChange">
				<table:extension>
					
					<OverflowToolbar style="Clear">
						<ToolbarSpacer/>
						<Button id="btnParnterApplyFilter"
							icon="sap-icon://filter"
							class="sapUiTinyMarginBeginEnd"
							tooltip="Apply Filters"
							text="Apply Filters"
							press="onPartnerFilter"/>
						<Button id="btnParnterResetFilter"
								icon="sap-icon://clear-filter"
								class="sapUiTinyMarginBeginEnd"
								tooltip="Clear all filters"
								text="Clear Filters"
								press="onReset"/>
					</OverflowToolbar>
				</table:extension>
				<table:columns>
					<table:Column filterProperty="_CODE" sortProperty="PARTNER_CUSTOMER_CODE"  width="110px">
						<Label text="CD"/>
						<table:template>
							<Text text="{CODE}"></Text>
						</table:template>
					</table:Column>
					<table:Column sortProperty="COMPANYNAME"  width="250px">
						<Label text="Company Name"/>
						<table:template>
							<Text text="{COMPANYNAME}"></Text>
						</table:template>
					</table:Column>
				</table:columns>
			</table:Table>
			</content>
			</Panel>
		</l:SplitPane>
			<l:SplitPane>
			<Panel width="auto" class="sapUiResponsiveMargin">
			<content>
			
		<table:Table id="tbl2" class="tbl sapUiTinyMarginTop" visibleRowCountMode="Fixed" visibleRowCount="2" selectionMode="None" alternateRowColors="true">
			<table:columns>
				<table:Column filterProperty="City"   width="100px">
					<Label text="City"/>
					<table:template>
						<Text text="{customer>CITY}"></Text>
					</table:template>
				</table:Column>
				<table:Column filterProperty="Zip"   width="100px">
					<Label text="Zip"/>
					<table:template>
						<Text text="{customer>POSTAL_CODE}"></Text>
					</table:template>
				</table:Column>
				<table:Column filterProperty="Country"   width="150px">
					<Label text="Country"/>
					<table:template>
						<Text text="{customer>COUNTRY}"></Text>
					</table:template>
				</table:Column>
				
				<table:Column filterProperty="Street"   width="150px">
					<Label text="Street"/>
					<table:template>
						<Text text="{customer>FULL_ADDRESS}"></Text>
					</table:template>
				</table:Column>									
			</table:columns>
			</table:Table>
			</content>
			</Panel>
			</l:SplitPane>
	<!--</l:Splitter>-->
		</l:PaneContainer>
	</l:ResponsiveSplitter>

[former_member465672 · Accepted solution]

Hi,

You can control this by adding SplitterLayoutData to the SplitPane.

Here is the code:

<l:ResponsiveSplitter defaultPane="default"> 
          <l:PaneContainer orientation="Vertical"> 
                      <l:SplitPane> 
                            <l:layoutData> 
                                  <l:SplitterLayoutData size="70%" /> 
                           </l:layoutData>

Here is the modified example:

https://jsbin.com/rikunijaze/edit?html,output

Best,

Teo

[Ajinkya_Jadhav · Accepted solution]

Thanks Teo