Side Menu logo position

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 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.


  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"/>


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

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=""
        <timer id="taskCounterTimer" delay="10000" repeating="true" autostart="true"/>
        <cssLayout id="horizontalWrap">
            <cssLayout id="sideMenuContainer">
                <cssLayout id="sideMenuPanel">
                    <cssLayout id="appTitleBox">
                        <image id="logoImage" visible="false"/>
                    <image id="companyLogo" responsive="true" scaleMode="SCALE_DOWN" align="MIDDLE_CENTER" width="90%"
                        <relativePath path="VAADIN/images/inteacclogo.gif"/>
                    <vbox margin="true" ext:index="2">
                        <search:richSearch id="search" align="MIDDLE_LEFT" width="100%" inputPrompt="msg://search"
                            <search:strategyBean name="search_SideMenuSearchStrategy"/>
                            <search:strategyBean name="search_UsersSearchStrategy"/>
                    <hbox id="companyButtonsBox">
                        <button id="btnDefaultCompany" height="20px" width="100%" align="MIDDLE_CENTER"
                        <label id="empty"/>
            <workArea id="workArea">
                    <label id="welcomeLabel" align="MIDDLE_CENTER" width="100%" stylename="c-welcome-text"

How it looks:

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

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.


1 Like

Thank you. You