0

I had already posted this issue on the Tech Community (https://techcommunity.microsoft.com/t5/sharepoint/too-much-padding-around-embedded-list-items-on-site-page/m-p/3956962) but after 2 months still no solution. That's why I wanted to give it a try here.

This is my issue:

I have a Communication Site wherein I have created a new blank list. I have created a tiles view that displays two list items as buttons.

When I embed the list on a site page, I notice that there is a lot of white space beneath the buttons, causing a lot of empty space before the next web part (News) appears.

I have tried changing the Height property, but it will not reduce the actual height of the web part.

This is my JSON schema used for the view configured on the SharePoint list:

 {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 65,
  "width": 500,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        }
      },
      {
        "elmType": "div",
        "style": {
          "background-color": "#0DB359"
        },
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "a",
                "attributes": {
                  "title": "[$Link]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent sp-card-highlightedContent sp-card-keyboard-focusable",
                  "href": "[$Link]",
                  "target": "=if ([$Link] == '', '', '_blank')",
                  "role": "heading",
                  "aria-level": "3"
                },
                "style": {
                  "pointer-events": "=if ([$Link] == '', 'none', 'auto')",
                  "text-decoration": "=if ([$Link] == '', 'none', 'auto')",
                  "color": "white",
                  "padding-top": "10px",
                  "padding-bottom": "10px"
                },
                "txtContent": "=if ([$Link.desc] == '', '–', [$Link.desc])"
              }
            ]
          }
        ]
      }
    ]
  }
}

If I change the height property value to less than 65, this causes the buttons to appear malformed.

This is how I configured the list web part and how my 'issue' looks like. If I change the 'Size' property of the List web part settings, the problem gets worse:

enter image description here

What could I need to change for the bottom padding to be removed?

Thanks for all help provided!

1 Answer 1

0
  1. Use dev tools and check to see if there are any inherited CSS styles that might be causing extra padding.
  2. Sometimes, the line-height property can cause extra space. Try 1em or smaller and adjust.
  3. Try setting the margin and padding properties of the li elements to zero or a smaller.
2
  • Thank you, Martin, for your reply. I have set the JSON schema using the list view formatting options. However, from there I have no option to edit the any HTML styling. Using dev tools I can only change the style inline upon opening the web site, however not save the configuration. Jan 8 at 10:39
  • If you have access to the master pages, you can add a <style> tag to change and override the CSS or If you have access to the CSS file, you can use the !important rule in your CSS to override other CSS rules. Jan 8 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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