Auto height css CollectionEditor widget for PropertyList<T>

Peter Gustafsson

Vote:

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.

No auto height

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:
Using height auto

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

#145258

Mar 01, 2016 9:55

Per Magne Skuseth

Vote:

Neat!

#145265

Mar 01, 2016 11:56