Search code examples
typescripticcubeiccube-reporting

Iccube - How to change height of items inside a Tree Filter using custom theme definition?

Using iccube reporting V8.2.2, I'm trying to change the height of items inside a Tree Filter using custom theme definition.

With following code in my theme definition TS file, I succeeded in changing the item height from 38px (default defined somewhere I don't know) to 22px :

FilterTree: {
    variants: [
        {
            props: {variant: 'My Own Tree'},
            style: {
                "&": 
                    {
                    ".ic3VirtualizedTreeItem-root": {
                        height: '22px !important',
                    }, ...

But this changes only the height of the item, not it's position, which seems to be calculated somewhere... and not using the new height I defined.

enter image description here

How can I define this top property for all the items correctly ? In this exemple, I want 44px (2 * 22) instead of 76px (2 * 38)

Solution

  • The tree filter uses virtualization (using react-window), and thus needs a set height for each item in the tree. This cannot be done using CSS. For release 8.3.0, we plan to add an option in the theme, theme.ic3.treeFilter.itemHeight, which you can use to change the height of the items.