Side Menu logo position

Support
#1

The new collapsible sideMenu is awesome. I am now trying to display a larger logo in a separate row in new side menu.

Here is my code:

I get the following result using the code below:

image

expanded

image

<image ext:index="1" id="logoImage" stylename="c-app-icon" align="MIDDLE_CENTER" scaleMode="SCALE_DOWN"/>

As you see there is a box beside the Application title which is the original location of the logo.

Questions:

  1. How can I remove the above square box (logo placeholder)?
  2. How can I keep some margin around the large log displayed above?

If I use a separate imageId, as follows I do not get the large image anymore

<image ext:index="1" id="logoImage2" stylename="c-app-icon" align="MIDDLE_CENTER" scaleMode="SCALE_DOWN"/>

image

#2

Hello @mortozakhan!

It is hard to say without full descriptor and controller files what is wrong. About your questions:

  1. You can hide this image using <image id="logoImage" visible="false"/>
  2. I think it is better to use CSS
#3

Hi Romain
Thank you. Now I got what I wanted except setting of margin for cssLayout: logoLayout. Is there any way setting margin without writing css style?

Here is my full code:

   <window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        xmlns:ext="http://schemas.haulmont.com/cuba/window-ext.xsd"
        xmlns:search="http://schemas.haulmont.com/cuba/search.xsd"
        extends="/com/haulmont/cuba/web/app/main/main-screen.xml">
    <timers>
        <timer id="taskCounterTimer" delay="10000" repeating="true" autostart="true"/>
    </timers>
    <layout>
        <cssLayout id="horizontalWrap">
            <cssLayout id="sideMenuContainer">
                <cssLayout id="sideMenuPanel">
                    <cssLayout id="appTitleBox">
                        <image id="logoImage" visible="false"/>
                    </cssLayout>
                    <image id="companyLogo" responsive="true" scaleMode="SCALE_DOWN" align="MIDDLE_CENTER" width="90%"
                           ext:index="1">
                        <relativePath path="VAADIN/images/inteacclogo.gif"/>
                    </image>
                    <vbox margin="true" ext:index="2">
                        <search:richSearch id="search" align="MIDDLE_LEFT" width="100%" inputPrompt="msg://search"
                                           suggestionsLimit="50">
                            <search:strategyBean name="search_SideMenuSearchStrategy"/>
                            <search:strategyBean name="search_UsersSearchStrategy"/>
                        </search:richSearch>
                    </vbox>
                    <hbox id="companyButtonsBox">
                        <button id="btnDefaultCompany" height="20px" width="100%" align="MIDDLE_CENTER"
                                stylename="small"/>
                        <label id="empty"/>
                    </hbox>
                </cssLayout>
            </cssLayout>
            <workArea id="workArea">
                <initialLayout>
                    <label id="welcomeLabel" align="MIDDLE_CENTER" width="100%" stylename="c-welcome-text"
                           value="mainMsg://application.welcomeText"/>
                </initialLayout>
            </workArea>
        </cssLayout>
    </layout>
</window>

How it looks:
image

Now, need to use Style to keep a margin on top and left/right.

#4

It is not necessary to extend the theme if you want to do a little style fix. You can use css attribute for adding inline style of element (see documentation).

For instance:

 <image id="myImage" css="padding: 5px">

Another way is to wrap your image into vbox / hbox with margin="true". But it will use default margin value and will look very small when the panel is collapsed.

image

1 Like
#5

Thank you. You