Skip to Content
0

Unexpected behavior in master-detail selection

Aug 10, 2017 at 01:47 PM

76

avatar image
Former Member

Hi,

We have a master-detail layout. In the detail view, we have an ObjectPageLayout with different sections (anchors).

Imagine this scenario:

You select an item in the master list, then you select the last section in the detail view. Now if you select another item in the master view, the detail view jumps up for some pixels.

This behavior happens every time you select a new item in the master list.

I would like to know if this behavior is already recognized in UI5 ! or there is something wrong from our side.

Thank you.

Mahnaz

10 |10000 characters needed characters left characters exceeded

Are you using Form UI control within your Detail page? Also, do you have any custom CSS classes written for the Detail page?

0
Former Member
saurabh vakil

yes, we are using Form in one of the anchors. No we do not have custom CSS classes.

0
Former Member
Former Member

the anchor with the form looks like this:

<VBox>
  <Panel>
    <form:formContainers>
0

Can you try replacing Form with SimpleForm?

0
Former Member
saurabh vakil

in our scenario SimpleForm does not do what we want. that's why I did not go for simple form in the first place :)

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

2 Answers

Sharath M G Aug 10, 2017 at 03:47 PM
0

I dont think it related to UI5 natural behavior. There is some re-adjustment happening due to the code or view design

Share
10 |10000 characters needed characters left characters exceeded
Emanuele Ricci Aug 16, 2017 at 01:49 PM
0

Can you post us a working demo?

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member
<!DOCTYPE xml>
<core:FragmentDefinition
        xmlns="sap.m"
        xmlns:core="sap.ui.core"
        xmlns:form="sap.ui.layout.form"
        xmlns:commons="sap.suite.ui.commons"
        xmlns:viz="sap.viz.ui5.controls"
        xmlns:layout="sap.ui.layout"
        xmlns:uxap="sap.uxap">
    <uxap:ObjectPageLayout subSectionLayout="TitleOnLeft"
                           enableLazyLoading="false"
                           showTitleInHeaderContent="false"
                           upperCaseAnchorBar="false">
        <uxap:headerTitle>
            <uxap:ObjectPageHeader>
            </uxap:ObjectPageHeader>
        </uxap:headerTitle>
        <uxap:headerContent>
            <layout:VerticalLayout>
                    ....
            </layout:VerticalLayout>
            <layout:VerticalLayout>
                <ObjectStatus/>
                        .
                        .
                <ObjectStatus/>
            </layout:VerticalLayout>
        </uxap:headerContent>
        <uxap:sections>
            <uxap:ObjectPageSection>
                <uxap:subSections>
                    <uxap:ObjectPageSubSection>
                        <uxap:blocks>
                            <VBox>
                                <core:Fragment fragmentName="js.view.device.fragment.Table"
                                               type="XML"/>
                            </VBox>
                        </uxap:blocks>
                    </uxap:ObjectPageSubSection>
                </uxap:subSections>
            </uxap:ObjectPageSection>
            <uxap:ObjectPageSection>
                <uxap:subSections>
                    <uxap:ObjectPageSubSection>
                        <uxap:blocks>
                            <VBox>
                                <core:Fragment fragmentName="js.view.fragment.PropertiesTable"
                                               type="XML"/>
                            </VBox>
                        </uxap:blocks>
                    </uxap:ObjectPageSubSection>
                </uxap:subSections>
            </uxap:ObjectPageSection>
            <uxap:ObjectPageSection>
                <uxap:subSections>
                    <uxap:ObjectPageSubSection>
                        <uxap:blocks>
                            <VBox columnLayout="1">
                            </VBox>
                        </uxap:blocks>
                    </uxap:ObjectPageSubSection>
                </uxap:subSections>
            </uxap:ObjectPageSection>
            <uxap:ObjectPageSection>
                <uxap:subSections>
                    <uxap:ObjectPageSubSection>
                        <uxap:blocks>
                            <VBox>
                                <Panel expandable="true">
                                    <form:Form maxContainerCols="2"
                                               editable="true">
                                        <form:layout>
                                            <form:ResponsiveGridLayout/>
                                        </form:layout>
                                        <form:formContainers>
                                            <form:FormContainer>
                                                <form:formElements>
                                                    <form:FormElement>
                                                        <form:fields>
                                                            <ComboBox>
                                                                <core:Item/>
                                                            </ComboBox>
                                                        </form:fields>
                                                    </form:FormElement>
                                                </form:formElements>
                                            </form:FormContainer>
                                            <form:FormContainer>
                                                <form:formElements>
                                                    <form:FormElement>
                                                        <form:fields>
                                                            <ComboBox>
                                                                <core:Item/>
                                                            </ComboBox>
                                                        </form:fields>
                                                    </form:FormElement>
                                                </form:formElements>
                                            </form:FormContainer>
                                            <form:FormContainer>
                                            </form:FormContainer>
                                        </form:formContainers>
                                    </form:Form>
                                </Panel>
                                <commons:ChartContainer showFullScreen="true"
                                                        showLegend="true">
                                    <commons:content>
                                        <commons:ChartContainerContent>
                                            <commons:content>
                                                <viz:VizFrame id="vizFrame"
                                                              height="700px"
                                                              vizType="line"
                                                              width="100%"
                                                              uiConfig="{applicationSet:'fiori'}"
                                                              vizProperties="{title:{visible: false}}">
                                                </viz:VizFrame>
                                            </commons:content>
                                        </commons:ChartContainerContent>
                                    </commons:content>
                                </commons:ChartContainer>
                            </VBox>
                        </uxap:blocks>
                    </uxap:ObjectPageSubSection>
                </uxap:subSections>
            </uxap:ObjectPageSection>
        </uxap:sections>
    </uxap:ObjectPageLayout>
</core:FragmentDefinition>

0