How to reduce the height of a checkbox column

Vaadin 7.6.1, Touchkit 4.1.0

I have changed column holding boolean values into a checkbox column using Table.addGeneratedColum() (this is Touchkit. Im usure if the table is touchkit-specific…?), but the line height of the rows where increased unexpectedly, see the screenshot.

What’s the simplest way of reducing the height of the cells in the checkbox column to just the checkbox?




The code that generates the column, is:

[code]
transactionsTable.addGeneratedColumn(“paidOut”, new Table.ColumnGenerator() {
private static final long serialVersionUID = -932068875568403416L;

                @Override
                public Object generateCell(Table source, Object itemId, Object columnId) {
                    Boolean checked = (Boolean) source.getItem(itemId).getItemProperty(columnId).getValue();
                    CheckBox checkBox = new CheckBox();
                    checkBox.setValue(checked);
                    checkBox.setEnabled(false);
                    checkBox.setSizeUndefined();
                    return checkBox;
                }
            });

[/code]The table is created by the following method (this is before the addGeneratedColumn change):
https://github.com/steinarb/ukelonn/blob/work/use-liquibase/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/AbstractView.java#L54

Thanks!

  • Steinar

I added an assignment of the height to a variable, and ran the method in a debugger:

[code]
transactionsTable.addGeneratedColumn(“paidOut”, new Table.ColumnGenerator() {
private static final long serialVersionUID = -932068875568403416L;

                @Override
                public Object generateCell(Table source, Object itemId, Object columnId) {
                    Boolean checked = (Boolean) source.getItem(itemId).getItemProperty(columnId).getValue();
                    CheckBox checkBox = new CheckBox();
                    float height = checkBox.getHeight();
                    checkBox.setValue(checked);
                    checkBox.setEnabled(false);
                    checkBox.setSizeUndefined();
                    return checkBox;
                }
            });

[/code]The value of height was -1.0 in the debugger, which implies unspecified size.

So… the checkbox shouldn’t be what increases the size, should it…?

I took a look at the document tree in the chrome DevTools. The document tree of a checkbox cell, is:

<td class="v-table-cell-content" style="width: 143px;">
 <div class="v-table-cell-wrapper" style="text-align: left; width: 143px;">
  <span class="v-checkbox v-disabled v-checkbox-disabled v-widget">
   <input type="checkbox" value="on" id="gwt-uid-47" tabindex="0" disabled="" checked="">
   <label for="gwt-uid-47"></label>
  </span>
 </div>
</td>

The CSS for the various elements is:

[code] .v-table-cell-content { overflow: hidden; /* padding: 6px 7px 6px 6px; */ vertical-align: top; white-space: nowrap; } [/code]
[code] .v-table-cell-wrapper { overflow: hidden; /* padding: 5px 0; */ white-space: nowrap; } [/code] [code] .v-touchkit-verticalcomponentgroup .v-checkbox { line-height: 43px; font-size: 16px; font-weight: bold; } [/code] [code] .v-checkbox label, .v-checkbox input { vertical-align: middle; white-space: nowrap; } [/code]Switching of the padding of the and the
gives an acceptable size of the table. Is there a simple way to do this from the Java code? Or will I need to mess around with CSS?

Thanks!

  • Steinar

I set the height explicitly to 25px (compared to the default height of 43px), and that gave a satisfactory result without having to resort to CSS modifications. I also removed the disabling of the checkbox to make the checkboxes more visible:

 transactionsTable.addGeneratedColumn("paidOut", new Table.ColumnGenerator() {
         private static final long serialVersionUID = -932068875568403416L;

         @Override
         public Object generateCell(Table source, Object itemId, Object columnId) {
             Boolean checked = (Boolean) source.getItem(itemId).getItemProperty(columnId).getValue();
             CheckBox checkBox = new CheckBox();
             checkBox.setValue(checked);
             checkBox.setHeight("25px");
             return checkBox;
         }
     });

Here is a screenshot with the checkbox set explicitly and the checkbox enabled: