Igx17 grid row height #13966
-
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? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments
-
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
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. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Hello @Eralmidia, I have been looking into your questions and to achieve your requirements what I can provide you as information is the following:
Additional information about setting grid sizes can be found here. |
Beta Was this translation helpful? Give feedback.
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 tovar(--ig-size-small)
in a scss file that responsible for the entire project such as the styles.scss file.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 smal…