Choicemenu not correct visible in Sharepoint - fault J-SON code

MLE_COMODO 20 Reputation points
2024-05-22T14:02:30.5766667+00:00

Hello everyone,

I created a J-SON format in Microsoft 365 - SharePoint to display a column with choices.

The intention is that new choices can also be made. With the code it works quite well, except when I want to edit in grid view or do InlineField editing (I have already removed the InlineField from the bottom code).

The choices then disappear, the boxes are white.Afbeelding

I know what this is about: "align-items": "baseline"

If I remove this, they are visible again, but not at all legible, aligned,...

Grid view:Afbeelding

Detail window: Afbeelding

I think something needs to be written with Children but I can't get there.

Afbeelding

Can someone help me with this?

Thank you in advance!

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

"elmType": "div",

"style": {

"box-sizing": "border-box",

"padding-top": "6px",

"padding-left": "2px",

"white-space": "nowrap",

"overflow": "hidden",

"text-overflow": "ellipsis",

"height": "10px",

"line-height": "20px",

"display": "=if((@currentField ==''),'none','flex')",

"align-items": "baseline"

},

"txtContent": "@currentField",

"customCardProps": {

"formatter": {

"elmType": "div",

"txtContent": "@currentField",

"style": {

"font-size": "12px",

"color": "green",

"padding": "5px",

"white-space": "normal"

}

},

"openOnEvent": "hover",

"directionalHint": "bottomCenter",

"isBeakVisible": true,

"beakStyle": {

"backgroundColor": "white"

}

}

}

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,073 questions
{count} votes

Accepted answer
  1. Emily Du 75 Reputation points
    2024-06-03T06:40:45.65+00:00

    Please use following JSON codes to add space between multiple choice column.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "style": {
        "flex-wrap": "wrap",
        "display": "flex"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "box-sizing": "border-box",
            "padding": "4px 8px 5px 8px",
            "overflow": "hidden",
            "text-overflow": "ellipsis",
            "display": "flex",
            "border-radius": "16px",
            "height": "24px",
            "align-items": "center",
            "white-space": "nowrap",
            "margin": "4px 4px 4px 4px"
          },
          "attributes": {
            "class": " "
          },
          "txtContent": "=join(@currentField, ', ')",
          "inlineEditField": "@currentField",
          "customCardProps": {
            "formatter": {
              "elmType": "div",
              "txtContent": "=join(@currentField, ', ')",
              "style": {
                "font-size": "12px",
                "color": "black",
                "padding": "5px",
                "white-space": "normal"
              }
            },
            "openOnEvent": "hover",
            "directionalHint": "bottomCenter",
            "isBeakVisible": true,
            "beakStyle": {
              "backgroundColor": "white"
            }
          }
        }
      ]
    }
    

    User's image


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Emily Du-MSFT 43,331 Reputation points Microsoft Vendor
    2024-05-24T02:17:38.1233333+00:00

    You could use following JSON codes.

    {
      "$schema": "
    https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
    ,
      "elmType": "div",
      "style": {
        "flex-wrap": "wrap",
        "display": "flex"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "box-sizing": "border-box",
            "padding": "4px 8px 5px 8px",
            "overflow": "hidden",
            "text-overflow": "ellipsis",
            "display": "flex",
            "border-radius": "16px",
            "height": "24px",
            "align-items": "center",
            "white-space": "nowrap",
            "margin": "4px 4px 4px 4px"
          },
          "attributes": {
            "class": {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Choice 1"
                  ]
                },
                "sp-css-backgroundColor-BgCornflowerBlue sp-field-fontSizeSmall sp-css-color-CornflowerBlueFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Choice 2"
                      ]
                    },
                    "sp-css-backgroundColor-BgMintGreen sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@currentField",
                            "Choice 3"
                          ]
                        },
                        "sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "@currentField",
                                ""
                              ]
                            },
                            "",
                            "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          },
          "txtContent": "@currentField",
          "customCardProps": {
            "formatter": {
              "elmType": "div",
              "txtContent": "@currentField",
              "style": {
                "font-size": "12px",
                "color": "green",
                "padding": "5px",
                "white-space": "normal"
              }
            },
            "openOnEvent": "hover",
            "directionalHint": "bottomCenter",
            "isBeakVisible": true,
            "beakStyle": {
              "backgroundColor": "white"
            }
          }
        }
      ]
    }
    

    Result:

    User's image

    User's image


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.