cancel
Showing results for 
Search instead for 
Did you mean: 

How to have a vertical line (like |) separating UI5 app whole screen visually into two halves

former_member524685
Participant
0 Kudos

vertical separator line between two equal width sections on screen

Also, this vertical line should be responsive - it should turn into horizontal line on small scree size - first section ...then separator line...second section

kammaje_cis
Active Contributor
0 Kudos

Deep, What are the business needs for this requirement?

former_member524685
Participant
0 Kudos

Hi Krishna, I need to make a Fiori Dashboard (a UI5 app) that should display weekly numbers tiles & daily number tiles.

These 2 sections should be separated by a line on the screen visually as mentioned in the UI requirement specifications.

Accepted Solutions (0)

Answers (3)

Answers (3)

former_member227918
Active Contributor
0 Kudos

you can use Splitter Layout control, and based on your screen size change the orientation dynamic

former_member524685
Participant
0 Kudos

Push anyone....

former_member524685
Participant
0 Kudos

Any help would be much appreciated

we have HorizontalDivider in ui5 libs but no VerticalDivider

irfan_gokak
Contributor
0 Kudos

Hi Deep,

I don't think this is possible but check below link. Hope this control will help you.

Flexible Column Layout

former_member524685
Participant
0 Kudos

Thanks,

but I am not lookinng for flexible layout like this.

My requirement is to display a line (like |) in between the whole UI5 app screen

irfan_gokak
Contributor
0 Kudos

Hi Deep,

You can do like this for large screens. But for small devices you have to hide Large screen panels and display other small screen panels. Check below code.

// View Code
<Page title="Title">
<content>
	<FlexBox alignItems="Start">
		<items>
		<Panel headerText="Page One - Large Screens" class="ClsBorderRight">
			<layoutData>
				<FlexItemData growFactor="1" span="L12 M4 S12"/>
			</layoutData>
		</Panel>
		<Panel headerText="Page Two - Large Screens">
			<layoutData>
				<FlexItemData growFactor="1" span="L12 M4 S12"/>
			</layoutData>
		</Panel>
		</items>
	</FlexBox>
	<Panel headerText="Page One - Other Screens" ></Panel>
	<Panel headerText="Page Two - Other Screens" ></Panel>
</content>
</Page>

// In style.css
.ClsBorderRight{
    border-right: solid black 3px;
}

Hope this will help.

One more thing other than playing around hide/visible thing find some other way to make Flexbox responsive.

former_member524685
Participant
0 Kudos

Thanks Irfan

but it doesn't bring a vertical line separator in middle of screen (visual custom requirement)

irfan_gokak
Contributor
0 Kudos

Hi,

This is what you want?