Editable TreeTable layout issues in Valo (and Reindeer)

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I wanted to upgrade to Valo as it looks better and works faster. Great work guys!
The TreeTables I use have some issues when using a FieldFactory. In Reindeer I got most of them fixed somehow but with Valo it is not as easy. I did not modify any (s)css besides defining some basic variables.

The issues as seen on the screenshot, which I wish to resolve:

  2. TreeSpacer and Icon are not correctly positioned vertically. (should be in the middle as in all other trees)
  3. TextFields in the tree column should not overlap the icon and not overflow the column (in general the icons should have a padding to the rest of the content)
  4. All components ideally have only a minimal padding within the table cell to show their focus, or at least be correctly centered.
  5. CheckBoxes should be vertically-align:middle as in a normal table.
  6. The components in the right most column should be aligned. The plus is a borderless button without a caption, the deletion icon is a PopupView with “”

1 and 2 are only happening in an editable TreeTable.
3 Is an issue in every table, I tried $v-table-cell-padding-horizontal but it also affects non-editable tables.
4 works in a Table.
5 This is not an issue with Valo, but I can’t get the proper padding and/or alignment.

Any help is highly welcome. Number 2 is the most annoying problem.

Looking forward to your answers.
16554.png

2

Hi Michael,

Any chance of getting a some test code? Would be faster that way rather than constructing that myself (for instance how the icons are added in front of the textfields). Can you also describe what theme you’re using in that screenshot and if you’re using Valo, what modifications have you done?

Thanks.

3

Hello Jouni, sorry for the delay, I’m finally back from my holliday and got round to build a sample.

The issue seems related to setting $v-unit-size and $v-layout-margin-* to smaller values.

I hope this helps. Looking forward to your answer.
16909.zip (6.72 KB)

4

Hello,
I noticed some changes on http://demo.vaadin.com/valo-theme/#!tables and wonder what progress has been made?