Changing the Height of a UOCListView Control on MIM2016 under SharePoint 2019

It’s been a while since I’ve done any kind of UI customisations to MIM Portal for end-users, so when a client asked me how to extend the height of a UOCListView control recently, I had to go hunting on how to actually do it, because naturally MIM makes it hard.

So, it turns out the UOCListView control itelf doesn’t have a property that allows you to define height. This seems odd, as every other multivalue field in the RCDC allows you to specify “rows”, but all you can specify in this instance is the number of results per page – increase the number of results to 100, and you still have 7 rows displayed with a really big scrollbar.

This leaves us with using CSS to extend the height of the box, and using Inspect Element pretty quickly lets me find the css that affects the height of the UOCListView control

Following up the DOM tree, I came up with this snippet of CSS that references the grouping and control names in the RCDC, and that will do the change I want:

#ctl00_PlaceHolderMain_EditCustomizedObject1_uoc_RoleAttributes_grouping_RoleReference_control_internalListControl_updatePanel .newListViewInternalDiv { height: 450px !important; }

In terms of loading my custom CSS into the Portal, this is really about modifying SharePoint themes. The first place to stop was the FIM Portal Visual Theme Customization page, but none of this really works in SharePoint 2019 – from what I understand the SharePoint Modern Themes aren’t supported in MIM, and once you change from the selected legacy theme, you can’t actually change it back.

After a bunch of google’ing, I came up with this approach instead:

  1. On your MIM Portal Server, navigate to C:\Program Files\Common Files\microsoft shared\Web Server Extensions\16\TEMPLATE\LAYOUTS\1033\STYLES
  2. Add your custom CSS to fim.css
  3. From a web browser, access https://MIMPORTAL/_layouts/15/1033/Styles/fim.css?v=randomvaluehere – putting a random value where it says randomvaluehere forces sharepoint to refresh its cache for that file
  4. Restart IIS on the MIM Portal Server
  5. Delight in the new height of your UOCListView control

Important Note: Any MIM updates you install may over-write the fim.css file that you’ve edited, so be sure to re-update this file with your changes after update.

Anyway, if there is a better way to increase the height of UOCListView controls in the MIM 2016 RCDC, then I haven’t been able to find it in the current documentation. If it gets added to a future update, I shall update this post accordingly. In the meantime, the above is a proven method for making this work

Leave a comment