Skip to Content
0

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

Nov 25, 2017 at 08:25 AM

247

avatar image
Former Member

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

10 |10000 characters needed characters left characters exceeded

Deep, What are the business needs for this requirement?

0
Former Member

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.

0
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Irfan Gokak Nov 26, 2017 at 01:59 PM
0

Hi Deep,

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

Flexible Column Layout

Show 4 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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

0

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.

0
Former Member

Thanks Irfan

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

0

Hi,

This is what you want?

sc.png (17.7 kB)
0
avatar image
Former Member Nov 28, 2017 at 04:09 PM
0

Push anyone....

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Any help would be much appreciated

we have HorizontalDivider in ui5 libs but no VerticalDivider

0
Akhilesh Upadhyay Nov 30, 2017 at 05:21 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded