How do I hide blank fields/divs on lists' card/gallery view?

Question

I have a sharepoint list being used in a visual way with the "Gallery/Cards" view format:

Let's say for example I have a field in an entry that doesn't need to have information and another field that does have information. The field that does not have information still shows up on the card view with a "-", like this:

What I wanted was for the whole information, including column name, not to appear in that specific card or any future card that has no information in a given cell. Here's a rough example of what I would like it to appear as:

Is this possible? I've tried manipulating the json so that I could create a condition in which all divs would appear on the cards only if the variable had any information on it, but I can't seem to get the syntax right.
Thank you in advance!

Answer 1

I faced the same issue, I solved it adding the css property display: none if the value is null, like this:

"elmType": "div",
"style": {
  "display": "=if([$Machine] == '', 'none', 'block')"
},

Answer 2

I think you can do that by updating the original JSON of the Gallery view.

In the original JSON, to show the value, "=if ([$Machine] == '', '-', [$Machine])" has been used, which now has been replaced with "=if ([$Machine] == '', '', [$Machine])".

Also, to show the column name, in the original JSON, "[!Machine.DisplayName]" been used. However, when I applied conditional (if) to display, it didn't work. So, had to hard-code the column display name with condition, that is, if column has a value then show the display name, otherwise not.

{
  "height": 165,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "=if ([$Title] == '', '', 'Title')"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "=if ([$Name] == '', '', 'Name')"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Name]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Name] == '', '', [$Name])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "=if ([$Machine] == '', '', 'Machine')"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Machine]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Machine] == '', '', [$Machine])"
              }
            ]
          }
        ]
      }
    ]
  }
}