Igx17 grid row height

[Eralmidia]

Upgrading to igx 17, this no longer seems to work:

Looking at the display density docs for the grid, I don't find it clearly explains how to set a common row height for all grids in the application. The sample seems to be focused on setting it for a single grid, which to me seems far less useful.

I've tried adding something like this in the theme.scss, but it doesn't do anything.

This on the other hand seems to work for buttons at least

How exactly does this system work?

[georgianastasov]

Hello @Eralmidia,

I have been looking into your question and you are on the right track and using the right way about setting the size of the igx-grid component.

This is the correct way and the correct approach to set the size of igx-grid components globally in a project by handling the igx-grid element selector and setting the --ig-size variable to var(--ig-size-small) in a scss file that responsible for the entire project such as the styles.scss file.

igx-grid{
    --ig-size: var(--ig-size-small);
}

This way, all igx-grid components in your project will be with small size.

Everything works as expected and the described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.

Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause why setting the size of the igx-grid components doesn't work for you.

[Eralmidia]

Thanks for the assistance @georgianastasov :) Got it working. We have defined light and dark theme for our app, so the CSS just had to be placed in their respective themes and it seems to start working (which is a bit odd as the button size variable worked outside the themes as well).

A follow-up question tho: These two seem to both work:

Is the --ig-size a general variable affecting multiple components, while others have their own variables? If you have a igx-button-size, why is there no igx-grid-row size or similar? Is there a table somewhere of all the variables used by the different components, like you have with the other style variables? I checked the theme docs for igx button, but couldn't find anything about size in there for instance.

Oh and a sidenote: your migration script (maybe from 16 to 17?) seems to have changed the variable from --igx-button-size: 28px; to --ig-button-size: 28px, but then the setting didn't seem to work anymore. The button only stays at 28px when using igx not ig.

[georgianastasov]

Hello @Eralmidia,

I have been looking into your questions and to achieve your requirements what I can provide you as information is the following:

1. Is the --ig-size a general variable affecting multiple components, while others have their own variables?
   --ig-size is a general custom CSS property with predefined values for sizes, with which you can configure the size on an application or a component level. --igx-component-size sets a specific size of the component itself, if such a variable is exposed.

2. If you have an --igx-button-size, why is there no --igx-grid-row size or similar?
   There is no --igx-grid-row variable and --ig-size variable is not predetermined to set the height of the grid rows. To set the row height in the igx-grid component you need to use the rowHeight property of the grid.

3. Is there a table somewhere of all the variables used by the different components, like you have with the other style variables?
   Here is the documentation for the schematics of each component, the default sizes can be seen. There is currently no other table for the variables that set the dimensions for each component.

4. --igx-button-size to --ig-button-size?
   There is no migration from --igx-button-size to --ig-button-size. What you may have seen is the migration to the ig-size global variable, for which we have already specified what it is for.

Additional information about setting grid sizes can be found here.
More information about the --ig-size global variable can be found here.