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. Commented Dec 12, 2020 at 2:47
  • Thanks for the response. See my answer.... Commented Dec 14, 2020 at 13:25

1 Answer 1

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 and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.