Hi,
I am using a CssLayout in the main window to provide a bit of responsiveness to my application. This works fine. However, I am seeing no horizontal scrollbars anymore. They seem to be just below the visible part of the window because scrolling is possible using the arrow keys.
Basically, I am using a CssLayout in the top of my main window to enable resposive behaviour and then have certain parts of the screen hidden through style changes if applicable.
As I’m using a rather large main window definition originally I tried to strip stuff to see if anything was conflicting but was unable to find anything other then that when changing the CssLayout tag to a vbox - everything works fine (but there is no responsive behavior). When switching back to the CssLayout the behavior is as described.
This is the main window definition:
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
xmlns:ext="http://schemas.haulmont.com/cuba/window-ext.xsd"
xmlns:main="http://schemas.haulmont.com/cuba/mainwindow.xsd"
caption="mainMsg://application.caption"
class="com.axxemble.base27.web.mainwindow.ExtAppMainWindow"
messagesPack="com.axxemble.base27.web.mainwindow">
<layout expand="mainLayout">
<cssLayout id="mainLayout"
responsive="true"
stylename="responsive-container"
width="100%">
<hbox width="100%"
height="46px"
id="header"
align="MIDDLE_CENTER"
expand="spacer"
ext:index="0"
stylename="header">
<button id="menuShow"
height="46px"
icon="font-icon:BARS"
invoke="toggleMenu"
stylename="menuShow"/>
<label id="spacer" align="MIDDLE_CENTER"/>
<main:userIndicator align="MIDDLE_LEFT"
stylename="headerUser"/>
<label width="20px"/>
<main:logoutButton align="MIDDLE_RIGHT"
icon="font-icon:SIGN_OUT"
width="40px"/>
</hbox>
<hbox id="mainBox" width="100%" height="100%" expand="mainPanel">
<vbox id="navPanel"
expand="toolsPanel"
stylename="navPanel"
width="250px"
height="100%">
<scrollBox id="toolsPanel"
stylename="toolsMenu"
width="250px">
<button id="menuDashboard"
caption="msg://Home"
height="43px"
icon="font-icon:HOME"
invoke="loadDashboard"
stylename="menuLevel0Btn" width="100%"/>
<button id="menuAbout"
caption="msg://About"
height="43px"
icon="font-icon:INFO_CIRCLE"
invoke="loadAbout"
stylename="menuLevel0Btn"
width="100%"/>
</scrollBox>
</vbox>
<vbox id="mainPanel"
stylename="mainPanel"
expand="mainWindow"
height="100%">
<hbox id="mainWindow"
expand="workArea"
ext:index="1"
width="100%">
<main:workArea id="workArea"
height="100%">
<main:initialLayout spacing="true"
stylename="initialBackground"/>
</main:workArea>
</hbox>
</vbox>
</hbox>
</cssLayout>
</layout>
</window>
The main window initially loads an image that should show scrollbars when the window is too small or high:
@Override
public void ready() {
super.ready();
// Initially load dashboard window
openWindow("base$dashboard-general", WindowManager.OpenType.THIS_TAB);
}
public class DashboardGeneral extends AbstractWindow {
@Inject
private Embedded imgDashboard;
@Override
public void init(Map<String, Object> params) {
imgDashboard.setSource("theme://images/Dashboard.png");
}
}
Attached i the modules directory of the stripped project without any of the build stuff.
Is this an issue, defined behaviour or am I doing something wrong? Any help appreciated.
Regards,
Berend
csstest.zip (371.2K)
