Нижний колонтитул SAPUI5 не отображается в правильном месте

Question

У меня проблема с дизайном страницы. Я не могу заставить заголовок и нижний колонтитул выглядеть правильно во всех разрешениях. У меня есть один основной вид приложения, который обрабатывает маршрутизацию и помещает требуемый вид в контент.

<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, я вставляю другие виды в само приложение. Здесь возникает моя проблема с дизайном. Если я использую содержимое заголовка и помещаю туда иконку (эта иконка должна повторяться для каждого подпредставления, поэтому я помещаю ее в app.view) Вот как это выглядит; заголовок не виден четко

если я просто удаляю элемент управления страницы или не использую в app.view и просто помещаю панель значков прямо над элементом управления, он работает нормально. Я хочу, чтобы моя иконка на панели всегда прикрепляла заголовок, поэтому я попытался включить его в содержимое заголовка. Другая проблема связана с нижним колонтитулом. После того, как я загрузил свой первый первый вид из маршрутизатора, я не вижу свой нижний колонтитул, если не прокручиваю вниз. Мне нужно прокрутить вниз, чтобы увидеть или установить высоту просмотра до 90%. Вот как это выглядит; недостающий нижний колонтитул

на изображении вы увидите другую полосу прокрутки справа, это из-за вибрации страницы (как-то трясло в хроме и я поместил код ниже к CSS)

html{ overflow-y: scroll;}

из app.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.view и контейнера прокрутки с высотой 90% (нижний колонтитул можно увидеть, но вы можете увидеть белую линию внизу, она становится больше при более высоком разрешении) (stackru не позволяет мне опубликовать 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, вот быстрое решение: панель инструментов, кажется, имеет фиксированную высоту около 125 пикселей (включая отступы) в разных разрешениях. Вы можете установить высоту контейнера приложения в соответствии с этим.

XML

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

CSS

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

Примечание: это не лучшее решение. Если я найду лучший, я обновлю этот ответ