SAPUI5頁腳沒有顯示在正確的位置

我有關於頁面設計的問題。我無法使頁眉和頁腳在所有分辨率下正確顯示。我有一個主要的應用程序視圖，它處理路由並將所需的視圖放置到內容中。SAPUI5頁腳沒有顯示在正確的位置

<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>

基於URL，我插入到應用程序本身的其他意見。這裏我的設計問題來了。如果我使用標題內容並將icontabbar放在那裏（這個icontabbar應該重複在每個子視圖上，這就是爲什麼我放在app.view內）這裏看起來如何; header cannot be seen clearly

如果我只是刪除頁面控件或不在app.view中使用，只是把icontab欄本身右上方來控制，它工作正常。我希望我的icontabbar始終保持標題，這就是爲什麼我試圖在標題內容中添加標題的原因。另一個問題是頁腳。我從路由器加載我的第一個視圖後，我不能看到我的頁腳，如果我不向下滾動。我需要向下滾動以查看或將視圖高度設置爲90％。這就是它的樣子; missing footer

你會在右邊看到另一個滾動的圖像中

，它是由於網頁振動（不知怎的，它在顫抖中鉻和我把下面的代碼到CSS）從應用程序

html{ overflow-y: scroll;}

.view如果我插入滾動容器和高度設置爲90％，它工作正常，但它會在更高的分辨率更高的位置。（所以在4K分辨率看起來很奇怪）

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

這裏是怎麼了現在看起來（沒有在app.vie W和滾動容器高度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>

在哪裏可以是問題？我非常接近失去理智。我嘗試漂浮頁腳，但同樣的問題。我應該在頁腳之前在子視圖中包含我的滾動容器嗎？

來源

2017-04-18 bilen

如果你是開放的一些CSS的解決方法，這裏有一個快速修復：工具欄似乎有大約125px的固定高度（包括填充）在不同的分辨率。你可以用這個來設置App容器的高度。

XML

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

CSS

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

注：這是不是最好的解決方案。如果我找到更好的，我會更新這個答案

來源

2017-04-19 06:30:44

謝謝你！我改變了頁面設計，但也有所幫助。 – bilen

SAPUI5頁腳沒有顯示在正確的位置

回答

相關問題