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 true
and stylename' is set to
agt-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>