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"

}

}

}

Microsoft 365 and Office | SharePoint | For business | Windows
{count} votes

Accepted answer
  1. Anonymous
    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 51,846 Reputation points Microsoft External Staff
    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.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.