0

When I apply view formatting to a doc library view, a height gets applied to the container which leaves a huge white space. This is the html where it gets applied:

<div class="e_b_ea5ab61a" data-automation-id="detailsListContainer" data-is-scrollable="true" style="height: 640px;">

And here's the first part of the JSON:

{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": true,
"tileProps": {
"hideSelection": true,
"width": "130",
"height": "110",
"formatter": {
  "elmType": "div",
  "style":{
      "max-height":"120px"

  },
  "children": [
    {
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-themeDark ms-bgColor-themePrimary--hover ms-fontColor-white ms-fontColor-white--hover"
      },
      "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "min-width": "130px",
        "min-height": "110px",
        "max-height":"120px",
        "margin-right": "10px",
        "margin-top": "10px",
        "box-shadow": "2px 2px 4px darkgrey",
        "background":""
      },
      "children": [ ....................

Obviously I'd like it to respond to the height of the contents but even if I add a max-height or height to the first div, it does nothing. Thanks!

2
  • Can you share a screenshot where exactly the white space is coming? Also remove min-height css from child elements if not necessary. Dec 12 '20 at 2:47
  • Thanks for the response. See my answer....
    – matt
    Dec 14 '20 at 13:25
0

Thanks. I figured it out when I looked at where the height is coming from:

<div class="e_b_ea5ab61a" data-automation-id="detailsListContainer" data-is-scrollable="true" style="height: 640px;">

And this is controlled by the web part option that sets the number of items to display. Sometimes we miss the obvious!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.