Make DatePicker visible inside a WindowPanel

[bernhard]

Hello,

I would like to display a
"com.google.gwt.user.datepicker.client.DatePicker" when I click inside
a "com.google.gwt.user.datepicker.client.DateBox" in a
"org.gwt.mosaic.ui.client.WindowPanel". However, the DatePicker is
displayed "under" the WindowPanel (assuming with a lower z-index).
How can I bring the DatePicker on top of the WindowPanel, so that it
is full displayed?
Here my code:
public class MyDateUI extends WindowPanel {

public MyDateUI {
this.setPixelSize(100, 100);
HorizontalPanel hp = new HorizontalPanel();
DateBox eventWhen1 = new DateBox();
final Image imgEventWhen1 = new Image();
imgEventWhen1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
eventWhen1.showDatePicker();
}
});
hp.add(eventWhen1);
hp.add(imgEventWhen1);
this.add(hp);
this.center();
this.show();
}
}

Any suggestions are highly appreceated!
Thanks.

Kind regards,

Bernhard

[bernhard]

Hello,

I made some additional tests with following testclass using
"org.gwt.mosaic.ui.client.datepicker.DateComboBox" in a WindowPanel:
----------------------------------------------------------------------------------------------------------------
import org.gwt.mosaic.ui.client.WindowPanel;
import org.gwt.mosaic.ui.client.datepicker.DateComboBox;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HorizontalPanel;

public class Test_GWT_Mosaic implements EntryPoint {

public void onModuleLoad() {

WindowPanel wp = new WindowPanel();
wp.setPixelSize(300, 300);
DateComboBox dcb = new DateComboBox();

HorizontalPanel hp = new HorizontalPanel();

hp.add(dcb);
wp.add(hp);
wp.center();
wp.show();
}
}

----------------------------------------------------------------------------------------------------------------

its the same problem, the DatePicker is "under" the WindowPanel
having no z-index in its div tag, whereas the WindowPanel div tag is
having a z-index of 10000.
Looking further in WindowPanel class I found the following method
which is called during the initialisation of WindowPanel:
--------------------------
void setZIndex(int zIndexOffset) {
int zIndex = (zIndexOffset + Z_INDEX_BASE);
if (modal) {
zIndex += Z_INDEX_MODAL_OFFSET;
}
DOM.setStyleAttribute(getElement(), "zIndex",
Integer.toString(zIndex));
if (glassPanel != null && glassPanel.isAttached()) {
DOM.setStyleAttribute(glassPanel.getElement(), "zIndex",
Integer.toString(zIndex));
}
}
-----------------------------
Z_INDEX_BASE is defined is int 10000.
When I replace the code with:
void setZIndex(int zIndexOffset) {
//Do nothing
}
the DatePicker popup is displayed correctly, but I would not like to
replace the WindowPanel class with my owm class only for this purpose.
Question: Why is z-index set to 10000 by default.
Is there any other solution to make the DateComboBox DatePicker popup
correctly visible.
Is this a possible bug?

Kind regards

Bernhard

[ctasada]

I had the same problem. To solve I'm using more a workaround, but
works ok

In your css file add the next definition

.dateBoxPopup {
z-index: 999000;
}

That will force the datepicker popup to show really high in your z-
index.

[bernhard]

Thanks for the workaround,

I submitted the issue as bug on http://code.google.com/p/gwt-mosaic/issues/detail?id=84

Kind regards

Bernhard