Hiding specific properties

Share & showcase
,
1

Every now and then I find myself wanting to hide some properties being viewed in either live preview and/or reading mode, so here are some use cases related to hiding properties:

  • Always hide a named property no matter the mode
  • Only hide the property if a given cssclasses is present
  • Always hide the next property
/* Always hide a named property */
.metadata-property[data-property-key="always_hidden"] {
  display: none;
}

/* Hide tags in a note with `cssclasses: hide_tags_in_this_file` */
.hide_tags_in_this_file .metadata-property[data-property-key="tags"] {
  display: none;
}

/* Always hide the `hide-next-property`, and a random next property */
.metadata-property[data-property-key="hide-next-property"],
.metadata-property[data-property-key="hide-next-property"]+.metadata-property {
  display: none;
}

The last case allows for you to add that property in front of one “random” property to be hidden. I used this variant to hide a very large list property with a few hundred elements in it.

As the CSS stands above it hides the properties in both live preview and reading mode. If you want to limit to just one of those modes, you’ll need to add an extra selector in front of the line with the .metadata... variants:

  • To only hide in reading mode add .markdown-preview-view
  • To only hide in live preview add .is-live-preview
  • Note that for the last case using cssclasses, you do not want to add the extra space

So to be explicit, the following CSS will hide cssclasses when in reading mode, hide aliases in live preview, and if you’ve set cssclasses: hide_tags_in_this_file it’ll hide the tags if you’re in live preview (but not in reading mode):

.markdown-preview-view .metadata-property[data-property-key="cssclasses"],
.is-live-preview .metadata-property[data-property-key="aliases"],
.is-live-preview.hide_tags_in_this_file .metadata-property[data-property-key="aliases"] {
  display:none
}

Hopefully this is understandable and useful for someone wanting to hide one or more properties in their vault. As the last example shows, you can also combine multiple properties/criteria using multiple selectors separated by a comma, ,, between the selectors.

Similar help topics and feature requests

Here is a list of post related to this topic:

1 Like
2

I like this alot! What would be the best way to hide multiple properties? For example, I don’t need to see the ‘created’ and ‘updated’ properties often. Do I need to create two full css statements, or can I have multiple properties within one?

3

I played around some more with this and found the following works:

/* Hide these properties */
.metadata-property[data-property-key="fileClass"],[data-property-key="filename"],[data-property-key="created"],[data-property-key="updated"] {
    display: none;
  }

Let me know if anyone has a more concise way of doing it!

4

I don’t think you can write it a lot shorter, unless you’re able to use some pattern to match multiple properties at once. Like if all your properties started with note_, i.e. note_created, note_updated, note_class, and so on you could use something like [data-property-key^="note_"] to target them all.

1 Like