"Hidden" files are clickable and take space in navigation

[dreamriper]

Steps to reproduce

if you take any Template and hide the elements like:

  div[data-path$='.png']{
	display: none !important;
}
  div[data-path$='.xlsx']{
	display: none !important;
}

the div which contains the element will be hidden which is correct but the elements are taking still place and can be clicked and opened by mistake

Expected result

• that the marked areas in red is not there

Actual result

Environment

SYSTEM INFO:
Obsidian version: v1.1.9
Installer version: v0.14.15
Operating system: Windows 10 Enterprise 10.0.19042

---

Additional information

• I believe the issue is that the element nav-file is not possible to target and it remains to be clickable

[rigmarole]

@dreamriper

Installer version: v0.14.15

This might be off-topic. But you should really really download the latest installer and reinstall Obsidian. In 0.15.9 a major upgrade required re-downloading. And in 1.1.9 it happened again. This might be irrelevant to your issue. But you might be experiencing other issues from not upgrading.

[CawlinTeffid]

Do you perhaps need to hide a parent element of the div instead?

[dreamriper]

yes that is what I also meant it is not possible to target with CSS because all files have the div with class “nav-file” so you would hide even .md files.
This issue was raised and mentioned to be fixed many versions ago

"Hidden" items in file explorer are navigable, clickable, take space

Steps to reproduce New vault, default settings, no plugins. Create note “A” Create note “C” Go to system file explorer and create files “B1.bat” to “B20.bat” (or .sh if non-windows) Return to Obsidian Expected result None of the phenomena described in the Actual result. Actual result There is vertical empty space between “A” and “C”. When the empty space is clicked, one of the “bat” or “sh” files are executed. You can navigate to the hidden items by clicking on A, clicking on A aga…

I will try to download the installer and re-install Obsidian first.

[dreamriper]

thanks for the suggestion but it did not help. Still the same.

[liam]

Does the issue still happen when using the default theme?

[holroy]

@dreamriper

yes that is what I also meant it is not possible to target with CSS because all files have the div with class “nav-file” so you would hide even .md files.

Given a more recent installer, like anything above 1.0.0, you get access to the :has() selector, this allows you do stuff like:

div.nav-file:has( div[data-path$='.xlsx'] ) {
  display: none !important;
}

Not tested, but it should work, and then you’re targetting the “correct” div, without affecting other div’s with the same class.

[WhiteNoise]

moved to help because this involved changing the default css.