How to disable Property Editor on reader mode?

What I’m trying to do

I want to make the Property Editor read-only when using the reading view? Even when I’m in reading view, I can still edit the properties.

image

Things I have tried

I’ve tried looking in the settings but I can’t find anything there.

Feature request? I also find Obsidian’s behavior illogical. Read-only should be read-only, but it isn’t.

Not necessarily a feature request because maybe I can disable it using a CSS snippet or something but have it only take effect in reading view

I just don’t know what the CSS would be.

For me it is a feature request. I really want the devs to implement a different default.

There is already a feature request:

Here’s a starting point for CSS. It makes properties at least a bit less editable. Better ideas welcome!

.markdown-reading-view .metadata-content {
	pointer-events: none;
}

.markdown-reading-view .metadata-content .multi-select-input,
.markdown-reading-view .metadata-content .metadata-add-button {
	display: none;
}

That works great, I edited it so that it also hides the X button beside the tags.

.markdown-reading-view .metadata-content {
	pointer-events: none;
}

.markdown-reading-view .metadata-content .multi-select-input,
.markdown-reading-view .metadata-content .multi-select-pill-remove-button,
.markdown-reading-view .metadata-content .metadata-add-button {
	display: none;
}

Edit:
I had to mark uncheck the “Marked as Solution” on your answer because this apparently also stops the tags from being clickablee.

Catching a few more cases. Do you have an idea how to disable plain text properties .metadata-input-longtext?

.markdown-reading-view .metadata-content {
	pointer-events: none;
}

.markdown-reading-view .metadata-content .multi-select-input,
.markdown-reading-view .metadata-content .multi-select-pill-remove-button,
.markdown-reading-view .metadata-content .metadata-add-button {
	display: none;
}

/* Make tags clickable */
.markdown-reading-view .metadata-content .multi-select-pill-content {
	pointer-events: auto;
	padding-right: .7em;
}

/* Make links clickable */
.markdown-reading-view .metadata-content .metadata-link {
	pointer-events: auto;
}

// moved to custom CSS :slightly_smiling_face:

This works amazingly, thanks!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.