Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
AI OnAI Off
Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
Thought I'd share this in case someone else needs to do the same thing.
The issue: When having multple IList properties for i.e. a page type each CollectionEditor has a fixed height set (CSS). When a collection gets larger a scrollbar apears so that the user can scroll the collection. This fixed height leads to a lot if wasted space as you can see below.
I wanted to have the height set to auto and not use scrollbars
The solution:
Add this css
.epi-collection-editor .dgrid {
height: auto !important;
}
.epi-collection-editor .dgrid .dgrid-scroller {
position: relative !important;
overflow: visible !important;
}
I placed those classes in
/ClientResources/Styles/Styles.css
which is set as a resource in module.config
The result:

There is a class for the DGrid widget that does pretty much the same thing
.dgrid-autoheight
https://github.com/SitePen/dgrid/blob/1767584e861f2d5aeb5f8a36de0973eef6660411/doc/usage/Styling-dgrid.md#the-dgrid-autoheight-class
I've suggested to Episerver that it would be nice to have this as an option for the CollectionEditor