I have an application with some pop-ups, for which I'm using GWT DialogBox.
The content of the pop-ups can change so I need to adapt the size of the pop-up to the content.
I was initially setting the height of the pop-up on creation, but then the content would show outside it if bigger.
Removing the setHeight, the pop-up actually adapts itself to the content, but I'm having problems centering the pop-up.
When the content changes I call popup.center(), but it is not really being centered as when I set manually the height.
I think it's a timing problem, because I have added a listener to center the popup when the window is resized and in this case the pop-up is being properly centered.
Any ideas?
UPDATE: think I found the issue. The content of the pop-up includes a table. The ResizeEvent is fired BEFORE the content of the table is shown, so on centring is actually considering the size of an empty table.
I tried to add a LoadingStateChangeHandler to fire a ResizeEvent when the status is LOADED, but it's still firing too early.
The problem is that the new size of the widget hasn't been calculated when you call popup.center().
Most people use this as a solution:
// <- popup content changes here
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
public void execute() {
popup.center();
}
});
Related
Can I insert Object Page Layout (for example this https://openui5.hana.ondemand.com/explored.html#/sample/sap.uxap.sample.ObjectPageSection/preview) inside a Dialog?
If I try to do it, I see only the anchor bar, not the bottom body.
The solution is to disable scrolling on the sap.m.Dialog element to avoid the Dialog from adding content indefinitely. See https://github.com/SAP/openui5/issues/2514
GWT 2.5.1; using Eclipse 4.2 with GPE;
UI specified with UiBinder
The app puts up a splash screen containing a "Go" button. That button's click handler does various initialization, including hiding itself and showing three other buttons, images, and text; it also initiates a server request (XMLHttpRequest) via a RequestBuilder. The RequestBuilder callback uses the returned server data to draw a bar graph in a canvas element.
After I click the "Go" button the browser window looks as expected with all the visual elements mentioned above. But the three buttons are not responsive to clicks. Not only are their handlers not invoked, they don't show the slight visual indication of activation when the mouse is clicked on them. The browser is not frozen; e.g., if the window is resized the app's resize handler is called.
Based on logging: after the "Go" button handler returns the RequestBuilder callback executes; then "nothing happens" i.e., there are no more log outputs (unless I resize the window).
FWIW this is my first GWT endeavor.
By experiment, I found a partial answer. The three non-responsive buttons are declared in the ui.xml file with {style.hidden} referring to a visibility:hidden attribute in my .css. In the java code I unhide these buttons with:
protected void showElement(Element e) {
e.removeClassName(style.hidden());
}
Evidently starting life as hidden and then shown this way is insufficient to activate the buttons. I am about to go off to research why this is so, but an answer to this "smaller" question is still welcome as long as I've not posted a comment indicating that I am less ignorant.
(too long for a comment)
I have just discovered that the problem relates to the fact that I have buttons in the same position, of which only certain ones are supposed to be visible at a given time. In other words, the user would see at the same position on the page one of:
ButtonA ButtonB ButtonC
or
ButtonD ButtonE ButtonF
or
BigButtonG (as wide either of the preceding groups)
The problem is that regardless of visibility, whichever of the three above displays is declared last has (in effect) a higher z-index and is the only one that will be mouse-responsive. So I am just about to implement a solution of explicitly setting div z-indexes in the code which shows/hides button groups.
Can you set the button's positions in your UiBinder file rather than in your Java code? Place them in a HorizontalPanel and they'll be spaced automatically.
And rather than interacting at the Element level to hide a button, instead call your button instance with setVisible(true); e.g., buttonA.setVisible(true)
Is it possible to show a popup only in a certain gwt tab or a panel in that tab?
I've found methods to show a popups over the whole page, but not only in specific tabs.
When you switch the gwt tab, the popup should not be visible anymore and new popups should be able to be created, which again are only visible in the switched to gwt tab. Switching back to the other tab should then show the first popup again.
Optionally the rest of the tab, which is not covered by the popup, should not be clickable.
Are there any native methods for this? The gwt Popup Panel only seems to create popups for the whole page.
Edit: I've tried using smartgwts Window which seems to work just the way I want it to. When I switch the gwt-tab, the popup is no longer visible and returns when I switch back. The only problem is, that it isn't displayed right. The frame is placed on the far left side of the browser tab, while the content is displayed on the far left of the gwt-tab. If I move the content, the frame moves too. The frame is visible over the whole browser tab, while the content disappears if I drag it over the gwt-tab edge.
I guess it's because I'm adding a Window to a gwt-Panel. Is there any way to fix this without changing everything to smartgwt?
Not exactly, I think.
But, you can do something in the tab events, like hide the popup in tabs that it doesnt belongs. To avoid the lag of show/hide the popup, you can do this in the BeforeSelectionHandler, like this:
getView().getTabPanel().addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>()
{
#Override
public void onBeforeSelection(BeforeSelectionEvent<Integer> event)
{
showPopupupsForTab(event.getItem());
}
});
In showPopupupsForTab you can show the popups for this tab (you can handle this with a map or something) and hide the others...
Something like this.
Hope it helps.
I have a problem with the flyout generated by the Facebook Send button. After clicking the "Send" button the flyout is generated and displayed behind some elements. Obscuring the buttons in the flyout.
I read that this is because of a parent element with the overflow:hidden style. However, I cannot remove this attribute since it will mess up the rest of my sites layout.
I tried to dynamically remove the overflow:hidden attribute upon clicking the Send button (Accepting the layout mess if someone actually uses the send button). Using the following code:
FB.Event.subscribe("message.send", function(response) { //Remove the
overflow:hidden styling here });
Unfortunately this event only fires upon actually sending the flyout form, which is too late as need to take action as soon as the button is pressed that shows the flyout.
Could anyone tell me how to bind an onclick event to the "Send" button or how to reposition the flyout completely. Or perhaps there is an alternate solution I have not yet considered.
Thanks in advance
Fixed position might work for some, but for most it will mess up your layout.
What worked for me is to take off any overflow: auto higher up in your CSS.
I did that and it works great!
There is a website which has an iframe including a web application. Let's assume that the application has a height of 1000px. At the bottom of the application (1000px) there is button. If the user presses the button, then the application changes its view and the new length is only 20px (the rage 20px to 1000px is therefore just white (blank page) ).
My goal is now that when someone presses on that button then the browser should scroll its page to the top (meaning that the scrolling happens outside the iframe. Does anyone know a solution how to do that in gwt (without setting an anchor in the page holding the iframe)?
Many thx in advance!
Finally I found the solution. Set at the top of your iframe an anchor and call it with:
public static native void scrollToTop() /*-{
$wnd.location.href = '#anchorName';
}-*/;
This will also force the parent window (the window holding the iframe) to scroll to that anchor.
Scrolling with javascript
Most people hate iframes for a number of reasons though, you should avoid using them if at all possible.
How about using JSNI and scrolling in parent or top window? Something like this:
public static native void scrollToTop() /*-{
$wnd.parent.scrollTo(0,0); // or `$wnd.top.scrollTo(0,0);
}-*/;
The combination with top should also work with just "window". The $wnd is just because GWT is actually running in an embedded iframe. But I'm not sure if your code will be allowed to scroll parent document if they come from different servers.
What about calling a java script function scrolling to a div id of the page holding the iframe? Is that possible?