DateField and TextField height on editable tables

Hello all,

When I set my table as editable the created textfields and datefields get narrower than usual.

I tried to see if there was some css class i could change and i found this one:

.v-table input.v-textfield

But when I increased the padding to: 3px 2px the dateFields were OK but the textfields get truncated. I noticed that this happens because all divs until the table td have a hardcoded style of height: 19px. if I change all divs to 23px with firebug everything was correct. As no class is involved on this second stage i gather these values are calculated in runtime?

If so where can i perform all changes so that all textfields and datefields have the proper height?

I’m using vaadin 6.4.6 on liferay, with the proper widgetset and the reindeer theme. Check out the pictures below.

P.S. Comboboxes do not suffer from this.

Thanx a lot

Anyone can help here?



The height of TextField is lower in Table than normally. This is by design. Otherwise, when you switch between non-editable and editable mode, the height of the table rows would change, which is not nice. Unfortunately, the height of DateField or ComboBox are not adjusted similarly when put in table. This is actually a small bug; created

If you use the table only in editable mode or do not care about the change of row height, you can do the following fix for the TextField. It also affects DateField, which uses a v-textfield element for the text input.

.v-table-cell-wrapper input.v-textfield {
    margin-bottom: 0px; /* Normally -2px in table */
    margin-top:    0px; /* Normally -2px in table */
    height: 19px;       /* Not auto */

See an
on-line example

The other solution is to have smaller popup buttons for the DateField and ComboBox when they are in a Table. This is the more proper solution, although requires a bit more work.