I'm using GWT 2.4. I have a view with some simple content ...
final Image ajaxImage = new Image("loading.gif");
final Grid grid = new Grid(1, 2);
grid.setText(0, 0, "Loading...");
grid.setWidget(0, 1, ajaxImage);
this.container = new FlowPanel();
this.container.add(grid);
rootPanel = new SimplePanel();
rootPanel.add(this.container);
I would like this content to be centered horizontally and vertically in the containing panel, which is a FlowPanel, if that matters. How do I do that?
Thanks, - Dave
I know how to do it in a verticalpanel.
VerticalPanel panelPrincipal3 = new VerticalPanel();//Esto es el panel central, donde se centra todo
panelPrincipal3.setWidth("100%");
panelPrincipal3.setHeight("100%");
panelPrincipal3.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
panelPrincipal3.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
panelPrincipal3.add(/*your panel*/);//here yo add whatever yo want, and should be centered
if you were to put your FlowPanel as a direct child of your RootPanel, you can try to set its height to 100%. so if you only have a grid as a child component for your container, you can set its alignments like this:
container.setCellHorizontalAlignment( grid, HasHorizontalAlignment.ALIGN_CENTER );
container.setCellVerticalAlignment( grid, HasVerticalAlignment.ALIGN_MIDDLE );
But if you ever change your mind and you'll switch to UiBinder, you can do something like this:
<g:VerticalPanel spacing="0" width="100%" height="100%" ui:field="mainPanel">
<g:Cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<!-- content goes here -->
</g:Cell>
</g:VerticalPanel>
with css? margin:0 auto; and position:absolute; top:50%; ?
Related
I want to resize my htmlDialogBox to wider width. This is what I have now. Half of my html is cut off. I want to display the entire html in the htmlDialogBox.
GWT version: 2.8.0-SNAPSHOT
verticalPanel = new VerticalPanel();
verticalPanel.setSpacing(0);
setWidget(verticalPanel);
verticalPanel.setSize("100%","100%");
scrollPanel = new ScrollPanel();
verticalPanel.add(scrollPanel);
htmlDialogBox = new HTML();
verticalPanel.add(htmlDialogBox);
scrollPanel.setWidget(htmlDialogBox);
htmlDialogBox.setSize("100%", "100%");
htmlDialogBox.setHTML(html);
setGlassEnabled(true);
setAnimationEnabled(true);
setPopupPosition(ClientUtils.DIALOG_X_POSITION,ClientUtils.DIALOG_Y_POSITION);
show();
I find my own answer.
change setAnimationEnabled(true); to setAnimationEnabled(false);
I have just 1 FlowPanel & 1 InlineHTML, the following code doesn't make InlineHTML go into the middle of FlowPanel.
myFlowPanel.setWidth("100%");
myFlowPanel.add(myInlineHTML);
myInlineHTML.setHTML("<table>...</table>");
myFlowPanel.addStyleName(getView().getRes().css().textAlignCenterImportant());
//This is css
.textAlignCenterImportant{
text-align:center !important;
}
How can we centralise the myInlineHTML inside myFlowPanel (GWT) by just using 1 FlowPanel & 1 InlineHTML without using other extra widgets?
This css will solve your problem. Apply it on InlineHTML.
.center_text {
display: block;
text-align: center !important;
}
InlineHTML in converted into <span> tag in HTML.
Here is the sample code:
FlowPanel fixHeaderPanel = new FlowPanel();
fixHeaderPanel.setWidth("100%");
InlineHTML inlineHTML=new InlineHTML("Hi how are you!");
inlineHTML.setStyleName("center_text");
fixHeaderPanel.add(inlineHTML);
Snapshot:
EDIT
as per your last comment.
try this one:
inlineHtnl.setHTML("<table width='100%'>..</table>");
Lt see this code in UiBinder file
<g:AbsolutePanel>
<g:at left='10' top='20'>
<g:Label>Lorem ipsum...</g:Label>
</g:at>
<g:Label>...dolores est.</g:Label>
</g:AbsolutePanel>
Gwt, how to make the above AbsolutePanel to have transparent background?
You can do that using css.
.transparent
{
z-index: 2;
opacity: 0.9;
}
Change the opacity level according to your preference. Then add this class to your absolute panel
DialogBox is in fact set of <div> elements. There is basically TitleBar, MainContent and the Footer. By default adding elements to DialogBox will throw them into main Content.
What I want is to throw something into footer. Its basically this div: <div class="dialogBottomCenterInner">
I made this method inside the class that inherits from DialogBox to wrap the footer:
public HTMLPanel getFooter() {
Element td = getCellElement(2, 1);
td.setId("footer"); //html at this point = <div class="dialogBottomCenterInner" id="footer"></div>
HTMLPanel panel = HTMLPanel.wrap(td);
return panel;
}
Unfortunatelly it fails at HTMLPanel.wrap(td);with
java.lang.AssertionError: null
There is no footer in a DialogBox. The element you refer to is a part of a border that surrounds the DialogBox.
I am using gwt for showing a dynamic image inside a td and the image is coming from a imagebundle but its showing the whole big image, which gwt makes during compilation, inside that td rather than showing specific part from that big image. I don't know what I am missing here... The problem is the image will be added and selected dynamically and I can't define a css everytime I add an image. If anyone of you can help me regarding it. Here is my code
My table cell is defined inside the UiBinder something like....
<ui:style>
.colourPickerCell {
background-repeat:no-repeat;
}
</ui:style>
<tr>
<td class="{style.colourPickerCell}" ui:field="colourPreviewSlot" rowspan="3" width="50%"></td>
</tr>
Function inside the presenter class:
public void newColorSelected(Image patternImage) {
Style patternImageStyle = patternImage.getElement().getStyle();
Style style = getColourPreviewSlot().getStyle();
style.setWidth(patternImage.getWidth(), Unit.PX);
style.setBackgroundImage(patternImageStyle.getBackgroundImage());
style.setLeft(-patternImage.getOriginLeft(), Unit.PX);
style.setTop(-patternImage.getOriginTop(), Unit.PX);
style.setHeight(patternImage.getHeight(), Unit.PX);
}
When I debug my code I get the html for patternImage object as:
<img id="..." style="backgrond:url(....) no-repeat -149px 12px;"/>
Best regards,
If you are using this image as a background sprite, it think you have to use background-position css property to "move" your image "behind" the td.
"left" and "top" properties are relative to the element you set the style on, not its underlying background image.