Hide Footer on small screens

Support
#1

Hi,

I create a main screen with responsive sidemenu and a footer. The footer should hide, wenn the screen width is smaller than 800px. This works, but wenn you resize the screen to a width > 800px the footer will not be displayed again.

The footer is a cssLayout and part of the workArea (vbox). The cssLayout property responsive is set to trueand stylename' is set toagt-footer-responsive`.

I hope you could help me.

Thanks,
Andreas

Custom theme hover-agt.scss:

@import "../hover/hover";
...
@mixin hover-agt {
  ....

  .agt-footer-responsive {

    &[width-range~="0-800px"] {
        display: none;
    }

    &[width-range~="801px-"] {
      display: inline-block;
      height: 48px;
    }
  }

}

Full source of screen:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        caption="mainMsg://application.caption"
        class="de.agentes.ksm.web.screens.ExtAppMainWindow"
        xmlns:main="http://schemas.haulmont.com/cuba/mainwindow.xsd">
    <layout responsive="true"
            stylename="c-sidemenu-responsive">
        <hbox id="horizontalWrap"
              expand="workArea_vbox"
              height="100%"
              stylename="c-sidemenu-layout"
              width="100%">
            <cssLayout id="sideMenuPanel"
                       height="100%"
                       stylename="c-sidemenu-panel">
                <button id="mobileMenuButton"
                        caption="mainMsg://app.menu"
                        icon="icons/mobile-menu.png"
                        stylename="primary c-sidemenu-toggle"/>
                <hbox id="mobileButtonsBox"
                      stylename="c-sidemenu-mobile-buttons">
                    <main:newWindowButton id="mobileNewWindowButton"
                                          description="mainMsg://newWindowBtnDescription"
                                          icon="app/images/new-window.png"
                                          visible="false"/>
                    <main:logoutButton id="mobileLogoutButton"
                                       description="mainMsg://logoutBtnDescription"
                                       icon="app/images/exit.png"/>
                </hbox>
                <hbox id="appTitleBox"
                      spacing="true"
                      stylename="c-sidemenu-title"
                      width="100%">
                    <label id="appTitleLabel"
                           value="mainMsg://application.logoLabel"/>
                </hbox>
                <cssLayout id="sideMenuWrap"
                           stylename="c-sidemenu-wrap">
                    <embedded id="logoImage"
                              align="MIDDLE_CENTER"
                              stylename="c-app-icon agt-responsive"
                              type="IMAGE"/>
                    <main:userIndicator id="userIndicator"
                                        width="100%"/>
                    <hbox id="mainButtonsBox"
                          stylename="c-main-buttons">
                        <main:newWindowButton id="newWindowButton"
                                              description="mainMsg://newWindowBtnDescription"
                                              icon="app/images/new-window.png"
                                              visible="false"/>
                        <main:logoutButton id="logoutButton"
                                           description="mainMsg://logoutBtnDescription"
                                           icon="app/images/exit.png"/>
                    </hbox>
                    <main:timeZoneIndicator id="timeZoneIndicator"
                                            width="100%"/>
                    <main:sideMenu id="sideMenu"
                                   selectOnClick="true"
                                   sidePanel="sideMenuPanel"
                                   sidePanelToggleButton="mobileMenuButton"/>
                    <main:ftsField id="ftsField"
                                   width="100%"/>
                </cssLayout>
            </cssLayout>
            <vbox id="workArea_vbox"
                  expand="workArea"
                  height="100%">
                <main:workArea id="workArea"
                               width="100%">
                    <main:initialLayout margin="true"
                                        spacing="true">
                        <label id="welcomeLabel"
                               align="MIDDLE_CENTER"
                               stylename="c-welcome-text"
                               value="mainMsg://application.welcomeText"
                               width="100%"/>
                    </main:initialLayout>
                </main:workArea>
                <cssLayout id="footer"
                           responsive="true"
                           stylename="agt-footer-responsive"
                           width="100%">
                    <hbox margin="true"
                          spacing="true"
                          width="100%">
                        <label id="version"
                               align="MIDDLE_LEFT"/>
                        <label id="footerText"
                               align="MIDDLE_RIGHT"
                               value="mainMsg://cuba.poweredBy"/>
                    </hbox>
                </cssLayout>
            </vbox>
        </hbox>
    </layout>
</window>
#2

Hi,

The reason is that you use display: none;. Instead, I would recommend changing footer size, e.g.:

.agt-footer-responsive {
  &[width-range~="0-800px"] {
    width: 0px;
    height: 0px;
  }

  &[width-range~="801px-"] {
    height: 48px;
    width: 100%;
  }
}

Regards,
Gleb

#3

Hi Gleb,

works perfectly.

Thanks
Andreas :slight_smile: