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
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