SAPUI5 페이지 바닥 글이 올바른 위치에 표시되지 않습니다.

Question

페이지 디자인과 관련하여 문제가 있습니다. 모든 해상도에서 머리글과 바닥 글이 올바르게 보이지 않게 할 수 있습니다. 라우팅을 처리하고 콘텐츠에 필요한보기를 배치하는 하나의 기본 앱보기가 있습니다. URL을 기반으로

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" heigh="100%" displayBlock="true" 
     controllerName="demo_pcm.App" > 

<Page id="productListPage" navButtonPress="onNavBack" showNavButton="true" title="{i18n>products}"> 
    <headerContent> 
<IconTabBar 
     expanded="false" 
     id="idIconTabBar" 
     select="handleIconTabBarSelect" 
     expandable="false" 
     applyContentPadding="false" 
     headerMode="Inline" 
     visible="{viewModel>/visible}" 
     > 
    <items> 
     <IconTabFilter 

       icon="sap-icon://begin" 
       iconColor="Neutral" 
       design="Horizontal" 
       text="STEP1" 
       key="STEP1" /> 
     <IconTabSeparator icon="sap-icon://open-command-field" /> 
     <IconTabFilter 
       icon="sap-icon://survey" 
       iconColor="Neutral" 
       design="Horizontal" 
       text="STEP2" 
       key="STEP2" 
     /> 


    </items> 
</IconTabBar></headerContent> 

    <content > 
<App id="app" > 
    <!-- pages will be filled automatically via routing --> 
</App> 
    </content> 
</Page> 

, 내가 응용 프로그램 자체에 다른 뷰를 삽입하고있다. 여기에 내 디자인 문제가 발생합니다. 헤더 콘텐츠를 사용하고 icontabbar를 배치하면 (이 icontabbar는 각 하위 뷰에서 반복되어야합니다. 그래서 app.view에 배치됩니다) 여기 보이는 방법; header cannot be seen clearly

그냥 페이지 컨트롤을 제거하거나 app.view에서 사용하지 않고 컨트롤 바로 위에 아이콘 표시 줄 바를 놓으면 제대로 작동합니다. 내 icontabbar 항상 헤더를 스틱 원하는 이유는 내가 헤더 콘텐츠에 포함하려고했습니다. 또 다른 문제는 꼬리말입니다. 라우터에서 첫 번째보기를로드 한 후 아래로 스크롤하지 않으면 내 바닥 글을 볼 수 없습니다. 보거나보기 높이를 90 %로 설정하려면 아래로 스크롤해야합니다. 그것이 그 모습입니다. 당신이 오른쪽에 또 다른 스크롤을 볼 이미지의 missing footer

, 그것은 페이지 진동에 기인한다 (어떻게 든이 크롬에 떨고 있었고, 난은 CSS에 코드 아래에 넣어) 응용 프로그램에서

html{ overflow-y: scroll;} 

내가 스크롤 컨테이너를 삽입하고 90 % 높이를 설정하면 .view, 그것을 잘 작동하지만, 더 높은 해상도에서 높은 위치를 이동합니다.

<ScrollContainer 
     height="90%" 
     width="100%" 
     horizontal="false" 
     vertical="true"> 
<App id="app" > 
    <!-- pages will be filled automatically via routing --> 
</App> 
</ScrollContainer> 

을 (그래서 4K 해상도가 매우 이상한 모양에서) 여기에 어떻게입니다 지금보십시오 (app.vie에서 제외) 높이가 90 % 인 스크롤 컨테이너 (꼬리말을 볼 수 있지만 아래쪽의 흰색 선을 볼 수 있지만 더 높은 해상도에서는 더 커집니다.) (stackoverflow에서 3 링크를 게시 할 수 없습니다 : /)

여기에 내 index.html을이

<script> 
    sap.ui.localResources("demo_pcm"); 
    sap.ui.localResources("util"); 
    sap.ui.localResources("i18n"); 
    var oModel = ""; 
    sap.ui.getCore().attachInit(function() { 
     sap.ui.require([ 
      "sap/m/Shell", 
      "sap/ui/core/ComponentContainer", 
      "demo_pcm/Component" 
     ], function(Shell, ComponentContainer, Component) { 

       app: new ComponentContainer({ 
        height:"100%", 
        component: new Component({ 
         id: "mvcAppComponent" 
        }) 
       }).placeAt("content"); 
     }); }); 



</script> 

가 어디에 문제가 될 수있다? 나는 나의 마음을 잃어 버리기에 아주 가깝다. 바닥 글이 있지만 같은 문제가 떠 다니려고했습니다. 바닥 글 앞에 하위 스크롤 자체에 스크롤 컨테이너를 포함해야합니까?

Answer 1

일부 CSS 해결 방법을 사용하는 경우 빠른 픽스가 있습니다. 툴바는 다른 해상도에서 약 125px (패딩 포함)의 고정 높이가있는 것으로 보입니다. 이것에 따라 App 컨테이너의 높이를 설정할 수 있습니다.

XML

<App id="app" class="adjustedHeight"> 

CSS

.adjustedHeight{ 
    height: calc(100% - 125px) !important; 
} 

참고 :이 최선의 해결책이 아닙니다.더 나은 것을 찾으면이 대답을 업데이트 할 것입니다.