Formatting components used as cell editors

[German2 (Germán Dressino)]

Hi,

I need an editable table to quickly enter some tabular data. I’ve created a custom TableFieldFactory to create fields, but components in cells look ugly (diferent height mainly). I fixed up the height to 23px and TextFields look ok but DateFields still look strange.

Please see image attached.

Which is the right way to format components used as cell editors?

I’m working in an application to manage bank checks information. Forms are not suitable because users prefer to use only the keyboard and navigate data as in MS-Excel.

Is there a better solution?

Thanks!

[Xavier (Xavier Pan)]

Did you see
link-table
this example?

¿Viste este ejemplo?

[Henri2 (Henri Sara)]

@Germán D Dressino

I need an editable table to quickly enter some tabular data. I’ve created a custom TableFieldFactory to create fields, but components in cells look ugly (diferent height mainly). I fixed up the height to 23px and TextFields look ok but DateFields still look strange.

Please see image attached.

This is a theme issue - in the reindeer theme, some component heights are effectively fixed, and some padding for table cells might also affect this. Take a look at the UI with Firebug or similar.

I think there was something somewhat related (component sizes in table cells) elsewhere on the forum, or maybe someone who knows the reindeer theme and CSS better can answer this. Some other themes may function better “out of the box”, so you could also try setTheme(“runo”) or some theme from the directory.

[German2 (Germán Dressino)]

Thanks!

Solution was there:
table>Height of Components in Editable Table

Solution 1 works perfectly!

Gracias!

---

Height of Components in Editable Table

TextFields components are normally a bit lower in Table than usually, as it makes the table more compact and, more importantly, prevents change of line height when switching between editable and non-editable mode. Some components do not have similar adjustments, which can make the table rows uneven.

Solution 1: Override the CSS rules that make TextFields low in Table:

.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 */
}

Solution 2: Use CSS to make the other components (DateField, ComboBox) the same height as TextField

xxx.setHeight("19px");