Misaligned icons on Material Atom UI

[z11h]

The icons are misaligned on the Material Atom UI.
Thanks!

[Alhadis]

Hey mate,

Strange, I'm unable to reproduce this issue (on either Mac OS or Windows 10). Are you using the latest versions of File Icons and Atom Material? :)

Also, a similar issue was reported in the past: one user suggested it might've been the fault of a (now removed) theme option to hide icons in tab bars.

As a very rough guess, I'd say your configuration settings still has the old setting enabled. Could you pop your user config.cson open and copy us the contents of the "atom-material-ui" key, please? :-)

[z11h]

@Alhadis sure, here you go!

  "atom-material-ui":
    colors:
      abaseColor:
        red: 87
        green: 107
        blue: 119
        alpha: 1
      accentColor:
        red: 157
        green: 105
        blue: 75
        alpha: 1
      genAccent: true
    fonts: {}
    tabs:
      tintedTabBar: true
    treeView:
      blendTabs: true
    ui:
      panelContrast: true
      panelShadows: true

[Alhadis]

Does uninstalling and reinstalling the Material UI theme have any effect?

[z11h]

Hmm, just reinstalled and the icons are still misaligned

.

[Alhadis]

Okay, I copied the exact settings you're using into my own config file... and I was unable to see any difference.

Could you kick the developer tools open and inspect the CSS properties being applied to the icons? For reference, here's how it appears for me:

[z11h]

Here it is 😄

[Alhadis]

Ah no, that won't help... I'll need you to inspect the actual icon itself:

1. Run the following line of code in the developer console:

inspect(document.querySelector("atom-pane-container > atom-pane > ul > li.tab.sortable.active > div.title.icon"));

You should see the Elements explorer switch focus to the current file's tab.
2. Open the element and select its ::before pseudo-element:

3. Hover over the pseudo-element with the cursor, and do a screencap. Show as much of the bottom-left panel as possible:

[z11h]

Thank you so very much for your help, here is the screencap of it.

The weird thing is that the inspect specifier that you gave me only worked on the tabs with non file-icons icons (ie the settings tab etc.)

Here is a screenshot of the behavior (on a tab-icons tab):

[Alhadis]

Ugh, sorry, that was a stupid idea of mine. Okay, try this:

• Add the following (temporary) CSS to your user stylesheet:

.tab-bar .tab .title{
    pointer-events: auto !important;
}

• Select the "Inspect Element" (:mag:) button in the top-left corner of the dev window, and pick any one of the misaligned icons. Repeat the screencap process.

The theme's set the icons to ignore clicks, which means they can't be inspected by being clicked on.

[z11h]

ok here it is:

[Alhadis]

Alright, could you give me a full list of all packages and themes (active or disabled) you have installed, please? Feel free to screencap if it saves you time. I'll assume you have the latest versions of each installed, so I won't bug you over the version numbers.

Also, just to be crystal clear... you don't have anything in your user stylesheet that might be affecting the tab bar, right? Really stupid question, but I'm trying to cover all bases here.

[z11h]

@Alhadis Oh my god, I just disabled file-type-icons and it was fixed :)

Thanks alot for your help!

[Alhadis]

Haha, no worries, mate. =) Good to hear it solved itself!

Was the File-Icons package disabled all along? Or did you disable and reenable it to make it work?

The randomness of this issue still has me puzzled.

[z11h]

@Alhadis No, both packages were enabled together at the same time, so when I disabled file-type-icon, it fixed itself :P

[Alhadis]

Oh! Sorry, I read file-type-icon as file-icons, so I thought you were referring to this package, haha. ^^ My bad.