How do I display a widget (HorizontalPanel) on top of another widget (Image) in GWT?

Question

I am trying to get two buttons inside a HorizontalPanel to display on top of an image. Not above as in you see the buttons and then look down the page further and see the image, but you look at the image and it has buttons on top of it.

This is the code I have so far in my Page.ui.xml file:

 <g:FocusPanel ui:field="profileImagePanel" addStyleNames="{style.headerImage}">
     <g:AbsolutePanel addStyleNames="{style.innerImagePanel}">
         <g:Image ui:field="profileImage" addStyleNames="{style.profileImage}"/>
         <g:HorizontalPanel ui:field="imageEditButtons" addStyleNames="{style.imageEditButtons}">
             <w:MultiUseButton ui:field="clearImage" addStyleNames="{style.change}" type="secondary" text="{i18n.clearImage}" visible="false"/>
             <w:MultiUseButton ui:field="changeImage" type="secondary" text="{i18n.changeImage}" visible="false"/>
         </g:HorizontalPanel>
     </g:AbsolutePanel>
 </g:FocusPanel>

The styles are:

.headerImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
}

.profileImage {
    width: 150px;
    position: relative;
}

.change {
    float: right;
}

.headerImage a {
    display: block;
}

.imageEditButtons {
    width:100%;
}

.innerImagePanel {
    width:150px;
}

I've tried using a FlowPanel instead of an AbsolutePanel, but that doesn't work. I've tried making the profileImage position:relative and imageEditButtons position:absolute but that screws up the whole display of the rest o the page. I also tried setting imageEditButtons margin-top:-20px but it goes underneath the image instead of on top. If I put the HorizontalPanel in the AbsolutePanel before the Image, then the buttons are above the image and if I try changing the top margin, it shifts the buttons and Image down.

I'm running out of ideas. Any suggestions of ways to make this work would be much appreciated.

Answer 1

Apply the style background-image instead using of the widget Image. Here's how I imagine the content of your UiBinder file:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
     xmlns:g="urn:import:com.google.gwt.user.client.ui">
   <ui:style>
       /* requirement style */
       .myPanel {
           width: 200px; /* width of your background image */
           height: 400px; /* height of your background image */     
           background-image: url(images/myimage.jpg); /* your image */
           background-repeat: no-repeat;
       }

       /* optional style */
       .myButton {
           margin: 10px;
           width: 80px;
           height: 40px;
       }
   </ui:style>
   <g:HTMLPanel>
       <g:FocusPanel ui:field="profileImagePanel">
           <g:AbsolutePanel addStyleNames="{style.myPanel}">
               <g:HorizontalPanel ui:field="imageEditButtons">
                   <g:Button ui:field="clearImage" text="clear image" addStyleNames="{style.myButton}" />
                   <g:Button ui:field="changeImage" text="second button" addStyleNames="{style.myButton}" />
               </g:HorizontalPanel>
           </g:AbsolutePanel>
       </g:FocusPanel>
   </g:HTMLPanel>

Replace my tags g:Button by your w:MultiUseButton and add needed additional styles. The styles you can bring in a your css file. As a result, you should get what you want. And in this case AbsolutePanel isn't required. The simple FlowPanel is also suitable.