Hi,
We are experiencing a strange scrolling problem when adding a Window to a view.
We are trying to display a popup close to another field while also adding a fade-effect.
In order to do so, the position is first calculated, then the new Window is moved with moveTo(), and then it is displayed with the animateFade() method.
This all works fine, except when in a scrolled view.
When scrolling the example case for instance, then opening the popup, the page is scrolled back to the top position.
This is apparently due to the moveTo() method, but without that, the popup is of course not in the right position.
Is this an issue with moveTo() or can this be resolved some other way?
We are experiencing a strange scrolling problem when adding a Window to a view.
We are trying to display a popup close to another field while also adding a fade-effect.
In order to do so, the position is first calculated, then the new Window is moved with moveTo(), and then it is displayed with the animateFade() method.
This all works fine, except when in a scrolled view.
When scrolling the example case for instance, then opening the popup, the page is scrolled back to the top position.
This is apparently due to the moveTo() method, but without that, the popup is of course not in the right position.
Is this an issue with moveTo() or can this be resolved some other way?
Code:
public class Reprocase implements EntryPoint {
public void onModuleLoad() {
final VLayout layout = new VLayout(10);
DynamicForm dateForm = new DynamicForm(); dateForm.setWidth(450);
final DateItem dateItem2 = new DateItem(); dateItem2.setTitle("Date");
dateItem2.setUseTextField(true);
dateItem2.setHint("<nobr>Direct date input</nobr>");
dateForm.setPadding(150);
dateForm.setItems(dateItem2);
layout.addMember(dateForm);
Canvas panel = new Canvas();
panel.setHeight(800);
final Button cssButton = new Button("Open popup");
cssButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
MyPopup popup = new MyPopup(dateItem2, layout);
popup.show();
popup.setContent("The popuptext more more more more moremo remoremo meormoemo moermoemomo emroemo meor moermeo");
}
});
panel.addChild(cssButton);
layout.addMember(panel);
layout.draw();
}
public static native void log(String msg) /*-{
console.log(msg);
}-*/;
public class MyPopup extends Window {
private final FormItem item;
public static final String VALUE = "value";
private Canvas content;
private static final int FADEIN_DURATION = 250; //default: 250ms
private static final int FADEOUT_DURATION = 250;
private MyPopup(FormItem item, Layout parent) {
this.item = item;
this.setAutoDraw(false);
this.setVisibility(Visibility.HIDDEN);
this.setCanFocus(false);
// Ui view
setShowEdges(true);
setShowHeader(true);
setShowFooter(false);
setWidth(250); // Default width
setAutoSize(true);
// Add the Window to the SilkCanvas
parent.addChild(this);
this.setKeepInParentRect(true);
}
public void setContent(String text) {
// 1. clear
if (content != null) removeItem(content);
// 2. create new content (html builder)
content = new Canvas();
content.setCanSelectText(true);
StringBuilder builder = new StringBuilder();
builder.append("<table><tr><td>" + text + "</td><td>Second cell</td></tr></table>");
content.setContents(builder.toString());
// Add our content and show it
this.addItem(content);
moveAndShow();
}
@Override
public void show() {
}
private void moveAndShow() {
item.focusInItem();
// Redraw so that we know the exact width and height so we can position the bubble correctly
this.redraw();
int left = item.getLeft() + 7;
int top = item.getTop() + item.getVisibleHeight() + 7;
moveTo(left, top);
if (!isVisible()) {
this.animateFade(100, null, FADEIN_DURATION);
}
}
@Override
public void hide() {
this.animateHide(AnimationEffect.FADE, new AnimationCallback() {
public void execute(boolean earlyFinish) {
MyPopup.super.hide();
destroy();
}
}, FADEOUT_DURATION);
MyPopup.super.hideClickMask();
}
}
}
Comment