Question

I need to place several DatePicker widgets into the row. If there is not enough width to place all of them the rest widgets shift to the next row. It is the default HTML layout behavior. So I am trying to use FlowPanel. With any other widgets (Buttons, Labels, …) everything ok, but DatePickers are placed one widget to the row. Here’s the code

    FlowPanel panel = new FlowPanel();      
    DatePicker picker1 = new DatePicker();
    DatePicker picker2 = new DatePicker();      

    panel.add(picker1);
    panel.add(picker2);

    RootPanel.get().add(panel);

Any suggestions to solve this problem?
Thanks.

Answer 1

DatePicker‘s root element is a table so you’d have to give it a display: inline-table style, or put it in an element with display: inline-block style.

The following shouldn’t break any other use of DatePicker, but won’t work in IE 6 or 7; it’s the Simplest Thing That Could Possibly Work™:

.gwt-DatePicker { display: inline-table; }

If you really need IE 6/7 support, you could try the following, in a CssResource:

@if user.agent ie6 {
   .gwt-DatePicker { display: inline; }
}
@else {
   .gwt-DatePicker { display: inline-table; }
}