tab setting in https://userstyles.org/styles/37035/github-dark has no effect

[the-j0k3r]

• Browser: forefox 56
• Operating System: Win 10
• Screenshot:

• HTML of the section where the issue occurs:

Github edit

<select class="form-select select-sm js-code-indent-width">
          <optgroup label="Indent size">
            <option value="2" selected="selected">2</option>
<option value="4">4</option>
<option value="8">8</option>
          </optgroup>
        </select>

Gist edit tabs

<select class="form-select select-sm js-code-indent-width">
          <optgroup label="Indent size">
            <option value="2">2</option>
<option value="4">4</option>
<option value="8" selected="selected">8</option>
          </optgroup>
        </select>
```

[Mottie]

Hi @the-j0k3r!

It's working for me. I think that another style or userscript, there are a lot, is modifying the tab size and overriding the GitHub Dark setting. Try turning them off one-by-one to find the culprit. Please let us know if it's one of ours.

[the-j0k3r]

Well, I disabled everything except github-dark cleared cookies, restarted firefox, disabled stylus/re-enabled, and still doesnt work.

[Mottie]

Are you using any userscripts?

[Mottie]

Oh, and we just changed the default tab setting on userstyles.org to "don't modify" (disabled). They totally messed up the storage, so you'll need to add any customizations every time you install/update a style.

[the-j0k3r]

I did

[the-j0k3r]

removed github dark rinse and repeat resets re-install gh dark

the code is there, still doesnt work.

[Mottie]

This was in Firefox... If you edit the tab size within Stylus, it may not automatically update the style unless you force an update.

[the-j0k3r]

well that works but doesnt work on the tab settings when editing code.

edit : the portion on screenshots is the relevant part.

[Mottie]

Ahh, you mean only within CodeMirror...

From looking at the HTML, it appears that CodeMirror adds a span with however many spaces you have the tab size set to:

<span class="cm-tab" role="presentation" cm-text="	">        </span> <!-- tab size 8 -->
<span class="cm-tab" role="presentation" cm-text="	">    </span> <!-- tab size 4 -->
<span class="cm-tab" role="presentation" cm-text="	">  </span> <!-- tab size 2 -->

.cm-tab {
  display: inline-block;
  text-decoration: inherit;
}

I don't think there's much we can do about that besides modifying it with javascript.

[Mottie]

Any ideas @silverwind?

The cm-text attribute does contain a tab, but I don't think using a :before or :after with that content would make any difference if we can't remove the spaces inside the span...

[silverwind]

You could try font-size: 0 on the span.

[Mottie]

That almost worked... but setting the font size for the :after is adding a top and bottom pad?

.cm-tab {
  display: inline !important;
  font-size: 0 !important;
}
span.cm-tab:after {
  content: attr(cm-text) !important;
  display: inline !important;
  font-size: 1rem !important;
}

I've tried .8rem but then the tab size changes as well.

[the-j0k3r]

superseded by #959 (comment)