Hi everyone,
I’m working with a multi-column layout in Obsidian that uses callouts (not the Tasks plugin, since it doesn’t support multi-column setups). In one column, I display tasks, and everything works fine except for one issue with the callouts themselves.
Whenever I accidentally click anywhere inside the callout (especially near a checkbox), it enters edit mode, even though I don’t want to edit it. While this behavior is expected, it gets annoying over time, especially when I just misclick.
I managed to lock all interactions within the callout using CSS (pointer-events: none
), which prevents unwanted edits. However, this also blocks specific interactions, such as the calendar date picker icon used in tasks. While other links and checkboxes remain clickable, the calendar icon gets locked as well.
Here is what I’ve tried so far
/* Désactiver les clics partout dans le callout */
.is-live-preview .cm-embed-block.cm-callout {
pointer-events: none !important; /* Désactive les clics globalement */
}
/* Réactiver les clics sur les liens */
.is-live-preview .cm-embed-block.cm-callout a {
pointer-events: auto !important;
cursor: pointer;
}
/* Réactiver les clics sur les checkboxes */
.is-live-preview .cm-embed-block.cm-callout input[type="checkbox"] {
pointer-events: auto !important;
cursor: pointer;
}
/* Réactiver les clics sur l'icône de crayon ou boutons spécifiques */
.is-live-preview .cm-embed-block.cm-callout .cg-note-toolbar-callout {
pointer-events: auto !important;
cursor: pointer;
}
/* Réactiver les clics sur le calendrier Flatpickr */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-calendar,
.is-live-preview .cm-embed-block.cm-callout .flatpickr-calendar * {
pointer-events: auto !important; /* Déverrouille le calendrier */
cursor: pointer;
}
/* Boutons de navigation du calendrier (précédent et suivant) */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-prev-month,
.is-live-preview .cm-embed-block.cm-callout .flatpickr-next-month {
pointer-events: auto !important;
cursor: pointer;
}
/* Sélection du mois et de l'année dans le calendrier */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-monthDropdown-months,
.is-live-preview .cm-embed-block.cm-callout .numInput.cur-year {
pointer-events: auto !important;
cursor: pointer;
}
/* Jours cliquables dans le calendrier */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-day {
pointer-events: auto !important;
cursor: pointer;
}
/* Boutons spécifiques comme "Today" et "Clear" */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-button {
pointer-events: auto !important;
cursor: pointer;
}
Does anyone know a way to completely lock a callout to prevent it from entering edit mode (like only editable with edit mode or by clicking on the up right <> icon only) while keeping all interactive elements (e.g., links, checkboxes, calendar icons) functional?
Thanks in advance for your help!