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);
Related
In iText 2 , we can use PdfContentByte to set customized page-size, however, in iText 7.1.2.
PdfDocument pdf = new PdfDocument(new PdfWriter(dest));
PdfPage page = pdf.addNewPage();
PdfCanvas pdfCanvas = new PdfCanvas(page);
Rectangle rectangle = new Rectangle(0, 0, 2000, 800);
pdfCanvas.rectangle(rectangle);
pdfCanvas.stroke();
Canvas canvas = new Canvas(pdfCanvas, pdf, rectangle);
PdfFont font = PdfFontFactory.createFont(FontConstants.TIMES_ROMAN);
PdfFont bold = PdfFontFactory.createFont(FontConstants.TIMES_BOLD);
Text title =
new Text("The Strange Case of Dr. Jekyll and Mr. Hyde").setFont(bold);
Text author = new Text("Robert Louis Stevenson").setFont(font);
Paragraph p = new Paragraph().add(title).add(" by ").add(author);
canvas.add(p);
canvas.close();
pdf.close();
even if we set larger width, it didn't work. still keep A4 size. How can i change the pageSize correctly ?
You are adding a new page without specifying a page size, hence the default page size (A4) is used. Please take a look at the API docs for the addPage() method: addNewPage(PageSize pageSize). You need to pass a PageSize argument if you want to get a page with another size.
There's also a setDefaultPageSize() method if you want to change the default page size from A4 to something else.
The PageSize class extends the Rectangle class: http://itextsupport.com/apidocs/iText7/latest/com/itextpdf/kernel/geom/PageSize.html
I have added a Label and a ListBox in a HorizontalPanel as a header of a web page. When I set the left margin of a label and the right margin of a listbox and change the size of the window, their positions change. It would be great if anyone can help me to solve this problem.
HorizontalPanel hp = new HorizontalPanel();
Label label = new Label("Test Program");
label.addStyleName("test-label");
ListBox listbox = new ListBox();
listbox.addItem("test1");
listbox.addItem("test2");
listbox.addStyleName("test-listbox");
hp.add(title);
hp.add(language);
CSS file:
.test-label{float:left}
.test-listbox{float:right}
I tried you code setting the HorizontalPanel to a 100% width. I tried adding margins to the elements and they work fine. Please note i suspect your vanish behaviour might be due to rogue additions
**hp.add(title);**
**hp.add(language);**
Your declarations have label and listbox and you are adding title and language.
Sample Code :
HorizontalPanel hp = new HorizontalPanel();
hp.addStyleName("testWidth");
Label label = new Label("Test Program");
label.addStyleName("test-label");
ListBox listbox = new ListBox();
listbox.addItem("test1");
listbox.addItem("test2");
listbox.addStyleName("test-listbox");
hp.add(label);
hp.add(listbox);
RootPanel.get().add(hp);
CSS
.test-label {
float: left;
margin-left: 10px;
}
.test-listbox {
float: right;
margin-right: 10px;
}
.testWidth{
width: 100%;
}
I've created a FlexTable, and I want to center it horizontally within a parent FlowPanel, like:
FlexTable ft = new FlexTable();
ft.add(0, 0, new Label());
ft.add(0, 1, new Orange());
ft.add(0, 2, new Label());
FlowPanel parent = new FlowPanel();
parent.add(ft); // how can I horizontally center the table in this div?
The content of the table is narrower than the parent FlowPanel (which is width:auto, the whole width of the browser), but the table is left-aligned right now,
Thanks
Two options:
parent.getElement().getStyle().setTextAlign(TextAlign.CENTER);
or
ft.getElement().getStyle().setProperty("margin", "0 auto");
You can use CSS styles instead, of course.
First of all? Which version of GWT are you using? The reason am asking this question, there is no method in FlexTable that is similar to add (int, int, Widget ) you have used in the latest version.
However, you can use the following code.
FlexTable ft = new FlexTable();
ft.setWidget(0, 0, new Label("a"));
ft.setWidget(0, 1, new Label("b"));
ft.setWidget(0, 2, new Label("c"));
FlowPanel parent = new FlowPanel();
parent.setSize("100%", "100%");
parent.add(ft);
parent.getElement().getStyle().setProperty("TextAlign", "center");
// If you are using Firefox :
//parent.getElement().getStyle().setProperty("TextAlign", "-moz-center");
RootLayoutPanel.get().add(parent);
If you dont't wish to mention the style in the java code, you can always use CSS like
parent.addStyleName("myStyle");
In CSS
.myStyle{
text-align : center;
}
I want to display three or more DataGrids in my LayoutPanel and specify their width as a percentage of the total width of the LayoutPanel, but in the LayoutPanel methods i see only methods for setting the width of the left and right widgets. setWidgetLeftWidth() and setWidgetRightWidth().
Is it possible to add more than 2 widgets to a LayoutPanel like
layoutPanel.add(dataGrid1);
layoutPanel.add(dataGrid2);
layoutPanel.add(dataGrid3);
layoutPanel.add(dataGrid4);
and then set the width of each widget to be 25% of the width of the LayoutPanel?
Thanks and regards
Mukul
What you have will work, all you need to do is to make each one setup like the following:
layoutPanel.add(dataGrid1);
layoutPanel.setWidgetLeftRight(dataGrid1, 0, Unit.PCT, 25, Unit.PCT);
Well I think you could do it with LayoutPanel too, but using the DockLayoutPanel is much easier! Here is the code for a the example you tried with a LayoutPanel.
public void onModuleLoad() {
//define a DockLayoutPanel with a Percentage size definition
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PCT);
//add four widgets to the DockLayoutPanel, each with a Percentage
//with of 25%
dockLayoutPanel.addWest(new Label("widget 1"), 25);
dockLayoutPanel.addWest(new Label("widget 2"), 25);
dockLayoutPanel.addWest(new Label("widget 3"), 25);
//the last widget must always be added with the .add method
//since it takes the rest of the screen
dockLayoutPanel.add(new Label("widget 4"));
//set a with to the DockLayoutPanel (elso you don't se much)
dockLayoutPanel.setWidth("500px");
dockLayoutPanel.setHeight("500px");
//add it to the RootPanel
RootPanel.get().add(dockLayoutPanel);
}
So as long as you don't have a good reason why you must use LayoutPanel, I'd use the DocklayoutPanel!
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%; ?