2

画像の上に表示するために、Horizo​​ntalPanel内に2つのボタンを表示しようとしています。上ではなく、ボタンが表示され、さらにページを下に見て画像が表示されますが、画像を見ると、その上にボタンがあります。

これは、Page.ui.xmlファイルにこれまでにあるコードです。

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

スタイルは次のとおりです。

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

AbsolutePanelの代わりにFlowPanelを使用してみましたが、機能しません。profileImageposition:relativeとimageEditButtonsを作成しようとしましposition:absoluteたが、ページの残りの部分の表示全体が台無しになります。imageEditButtonsも設定してみましmargin-top:-20pxたが、画像の上ではなく下に表示されます。画像の前のAbsolutePanelにHorizo​​ntalPanelを配置すると、ボタンが画像の上に表示され、上マージンを変更しようとすると、ボタンと画像が下に移動します。

アイデアが足りなくなっています。この作業を行う方法の提案をいただければ幸いです。

4

1 に答える 1

1

ウィジェットImagebackground-imageを使用する代わりに、スタイルを適用します。UiBinderファイルの内容を想像する方法は次のとおりです。

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

私のタグg:Buttonをあなたのものに置き換えて、w:MultiUseButton必要な追加のスタイルを追加してください。cssファイルに取り込むことができるスタイル。結果として、あなたはあなたが望むものを手に入れるべきです。この場合、AbsolutePanelは必要ありません。シンプルなFlowPanelも適しています。

于 2012-05-03T15:44:55.630 に答える