Skip to Content
0

sap.ui.layout how to convince panel to be max height in splitter pane?

Dec 17, 2017 at 02:30 AM

60

avatar image

hello,

i am using splitter layout to divide view into three panes.

in one pane i need to display a web page (in a panel in the pane).

in the xml i have:

<content>
	<l:Splitter id="splitter" height="100%" width="100%">
		<l:contentAreas>
			<Panel id="splitterContentLeft" width="auto">
				<layoutData><l:SplitterLayoutData id="leftSplitterLayoutData" size="100px"/></layoutData>
				<core:HTML content='<iframe src="https://openui5.hana.ondemand.com/#/api/sap.ui.layout.Splitter" >'></core:HTML>
			</Panel>
			<Panel id="splitterContentMiddle" height="100%" width="100%" headerText="content 2">
				<layoutData><l:SplitterLayoutData id="middleSplitterLayoutData" size="auto"/></layoutData>
			</Panel>
			<Panel id="splitterContentRight" height="100%" width="100%" headerText="content 3">
				<layoutData><l:SplitterLayoutData id="rightSplitterLayoutData" size="30%"/></layoutData>
			</Panel>
		</l:contentAreas>
	</l:Splitter>
</content>

the web page displays ok but it does not take up the whole area in the panel in the pane.

how can i achieve this please?

10 |10000 characters needed characters left characters exceeded

Please share screenshot.

0
screenshot.png (27.2 kB)
0

Can you provide your entire view and controller?

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

2 Answers

Best Answer
Irfan Gokak Dec 18, 2017 at 07:26 AM
0

Apply custom CSS.

Show 3 Share
10 |10000 characters needed characters left characters exceeded

hello Irfan,

CSS is not one of my strengths.

can you please suggest me some example code.

cheers

Pas

0

Hope this will help. Or go to the this they have used same CSS Link

.side-navigation-demo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;


    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;


    max-width: 15rem;
}

1

than you Irfan

vary helpful.

cheers

pas

0
Arjun Biswas Dec 18, 2017 at 04:47 AM
0

Hi pas longo,

Have you tried with IFrames.

Regards,

Arjun Biswas

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

hello Arjun,

i am already using an iFrame.

cheers

Pas

0