Как отобразить виджет (HorizontalPanel) поверх другого виджета (изображения) в GWT?
Я пытаюсь получить две кнопки внутри горизонтальной панели для отображения в верхней части изображения. Не выше, так как вы видите кнопки, а затем смотрите вниз на страницу дальше и видите изображение, но вы смотрите на изображение, и на нем есть кнопки сверху.
Вот код, который у меня есть в моем файле 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;
}
Я пытался использовать FlowPanel вместо AbsolutePanel, но это не работает. Я пытался сделать profileImage position:relative
и imageEditButtons position:absolute
но это портит весь экран остальной части страницы. Я также попытался установить imageEditButtons margin-top:-20px
но он идет под изображением, а не сверху. Если я помещаю HorizontalPanel в AbsolutePanel перед изображением, то кнопки находятся над изображением, и если я пытаюсь изменить верхнее поле, оно сдвигает кнопки и изображение вниз.
У меня заканчиваются идеи. Любые предложения о способах сделать эту работу будет высоко ценится.
1 ответ
Применить стиль background-image
вместо использования виджета 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 также подходит.