Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

Auto height css CollectionEditor widget for PropertyList<T>

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

Neat!

#145265
Mar 01, 2016 11:56
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.