Forum Discussion

Sharepointnoob's avatar
Sharepointnoob
Copper Contributor
Mar 27, 2024

How to disable the second scrollbar on a modern sharepointpage with a list in it?

I have a Sharepoint online page where you can see a long list. My client did not like that on the right you can see 2 vertical scrollbars. I told them one is for the page and the other one is for the...
Lists
microsoft lists
SharePoint Online
Sites
ganeshsanap's avatar
ganeshsanap
MVP
Mar 28, 2024

Sharepointnoob 

 

Are you using SharePoint default list web part on site page? Did you customize the list view using JSON formatting?

 

There is no way to change the "code" / functionality of SharePoint default list web part using out of the box capabilities.

 

However, you maybe able to customize list view using JSON formatting so that scroll bar will be removed from page. Check:

  1. Use view formatting to customize SharePoint 
  2. SharePoint JSON view formatting samples - you can find different view samples here which might help you to get started with

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Sharepointnoob's avatar
Sharepointnoob
Copper Contributor
Mar 28, 2024
I have a SharePoint list with a custom formatted view created using JSON formatting. Is it possible to modify the JSON code to remove the vertical scrollbar from this view? I attempted to add the following code for this purpose, but it didn't work:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"additionalRowClass": "hide-vertical-scrollbar"
}

Could you provide guidance on how to achieve this?
  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Mar 28, 2024

    Sharepointnoob

     

    Can you share current JSON used for list view formatting?

    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

    • Sharepointnoob's avatar
      Sharepointnoob
      Copper Contributor
      Mar 28, 2024
      Ofcourse, here it is:

      {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
      "additionalRowClass": "hide-vertical-scrollbar",
      "hideSelection": true,
      "hideColumnHeader": true,
      "rowFormatter": {
      "elmType": "div",
      "style": {
      "display": "flex",
      "padding": "5px",
      "margin-bottom": "5px",
      "margin-right": "100px",
      "width": "90%"
      },
      "children": [
      {
      "elmType": "div",
      "children": [
      {
      "elmType": "div",
      "attributes": {
      "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
      },
      "style": {
      "display": "block",
      "font-size": "18px",
      "font-weight": "500",
      "padding-bottom": "0px",
      "padding-top": "0px",
      "text-decoration": "none",
      "text-overflow": "ellipsis",
      "white-space": "normal"
      },
      "txtContent": "=[$Title]"
      },
      {
      "elmType": "div",
      "style": {
      "font-size": "14px",
      "white-space": "normal",
      "overflow": "hidden",
      "text-align": "left"
      },
      "txtContent": "=[$Description]"
      }
      ]
      }
      ]
      }
      }
      • ganeshsanap's avatar
        ganeshsanap
        MVP
        Mar 28, 2024

        Sharepointnoob Can you try using this once?

         

        {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "padding": "5px",
      "margin-bottom": "5px",
      "margin-right": "100px",
      "width": "90%",
      "overflow": "hidden"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
            },
            "style": {
              "display": "block",
              "font-size": "18px",
              "font-weight": "500",
              "padding-bottom": "0px",
              "padding-top": "0px",
              "text-decoration": "none",
              "text-overflow": "ellipsis",
              "white-space": "normal"
            },
            "txtContent": "=[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "14px",
              "white-space": "normal",
              "overflow": "hidden",
              "text-align": "left"
            },
            "txtContent": "=[$Description]"
          }
        ]
      }
    ]
  }
}

         

        Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Resources