Forum Discussion

Dhiran Gajjar's avatar
Dhiran Gajjar
Iron Contributor
Jul 18, 2022
Solved

SharePoint View Formatting

Hi All,   I am trying to create a view that is basically showing a medals table for a SharePoint list. What I would like to do is have a consistent format for this. My list contains the following c...
  • Don Kirkham's avatar
    Jul 18, 2022

     

    Dhiran Gajjar 

    Not sure why you had the card view selected. The card view will only display one row of data in the card. If you are looking for a table of data, you can use a list view, but make it look like a card. To answer your actual question about fixed with, below is your sample with a fixed overall width of 600px and a fixed Country($title) width of 200px. The remaining columns are flexed to fill the remaining width evenly. Hope this helps.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
      "hideSelection": true,
      "hideColumnHeader": true,
      "rowFormatter": {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "flex-start"
        },
        "attributes": {
          "class": ""
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "text-align": "left",
              "width": "600px"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title"
                },
                "style": {
                  "flex": "0 0 200px"
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "style": {
                  "flex": "1"
                },
                "txtContent": "[$Gold]"
              },
              {
                "elmType": "div",
                "style": {
                  "flex": "1"
                },
                "txtContent": "[$Silver]"
              },
              {
                "elmType": "div",
                "style": {
                  "flex": "1"
                },
                "txtContent": "[$Bronze]"
              },
              {
                "elmType": "div",
                "style": {
                  "flex": "1"
                },
                "txtContent": "[$Total]"
              }
            ]
          }
        ]
      }
    }

     

    Take care,

    Don

     

    Please click Mark as Best Response & Like if my post helped you to answer or resolve 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 a Like.

Resources