search

aidenlx / obsidian-icon-shortcodes

Obsidian Plugin: Insert emoji and custom icons with shortcodes
MIT License
138 stars 11 forks source link

Non-Emoji icons stretch across whole window #48

Closed Panossa closed 2 years ago

Panossa commented 2 years ago

Hey, I just noticed if I try to insert an icon like :currency: from Lucide or :folder: from the Obsidian icons, it will be stretched across the whole window. Image is attached. image

Edit: it also happens with the default pack if I use emojis/icons that don't have color like :trash: and :trash2:

aidenlx commented 2 years ago

have you test this in sandbox vault? Also, could you upload your debug info, which can be accessed in Obsidian with Ctrl/Cmd-P, enter "Show debug info", and click "Copy to clipboard"?

Panossa commented 2 years ago

Hey, sorry for the delay. Neither in the Obsidian Sandbox nor in the "Obsidian Help" vault (that now became Obsidian Sandbox) have this bug. To reiterate: even if I disable all plugins except this plugin, I get the same behavior in my normal vaults.

Here's the debug info:

SYSTEM INFO:
    Obsidian version: v0.14.6
    Installer version: v0.13.31
    Operating system: Windows 10 Pro 10.0.19041
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: dark
    Community theme: none
    Snippets enabled: 1
    Safe mode: off
    Plugins installed: 10
    Plugins enabled: 1
        1: Icon Shortcodes

RECOMMENDATIONS:
    Custom theme: for cosmetic issues, please first try updating your theme to latest. If still not fixed, please try to make the issue happen in the help vault or disable community theme and snippets.
    Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the help vault or disable community plugins.
aidenlx commented 2 years ago

could you upload the css snippet? It's probably because the snippet is out of date.

Panossa commented 2 years ago

I just went through the DOM in the Sandbox Vault and one of my normal vaults. When I insert one of the broken icons, the DOM consists of these elements:

div.cm-line
  span.cm-isc-icon // and more classes
    svg

However, this svg tag which actually contains the icon has one main difference in its css. In the vaults where the behavior is broken, I see this: image

In the vaults where everything works as intended it's this, however: image

So it seems like something defines the css of svg tags differently but I can't figure out what it might be (especially since I haven't enabled any other plugins).

Fun fact: if I disable the width and height css rules in the vaults with the broken behavior, it actually fixes the problem.

Panossa commented 2 years ago

could you upload the css snippet? It's probably because the snippet is out of date.

The only css snippet I've enabled is this and I'm very sure the behavior was broken before, too: img { display: block; margin-left: auto; margin-right: auto; }

aidenlx commented 2 years ago

are you sure that you've updated to the latest version? it seems to be an old issue that's fixed in 0.9.3

Panossa commented 2 years ago

Damn, I wasn't on the latest version, thanks. I'm still quite new to Obsidian, didn't even know you need to manually check if any of the installed plugins need updates. :/ Thank you! It works now. ^^