Change position of new tab button

[Keith94]

I was wondering if there's a CSS trick or separate option to control the position of the new tab button (i.e. top or bottom of sidebar, after last tab only, or disabled etc.)

[piroor]

I think you can do these customization via user defined CSS. For example:

top or bottom of sidebar

#all-tabs { order: 1000; }

or

.newtab-button-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
}
#tabbar {
  top: 20px !important;
}
.tab.pinned {
  margin-top: 20px;
}

after last tab only

#tabbar.overflow .after-tabs {
  display: block;
}
#tabbar.overflow ~ .after-tabs {
  display: none;
}

[piroor]

If you have more ideas, please share them as code snippets.
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules

[Keith94]

Thanks, these mostly work but have some bugs. For example when set to the top edge, there remains a blank space at the bottom when there's many tabs. And when set to the bottom edge, the new tab disappears when there's few tabs. If I have anything to add I'll definitely share it though. :)

[asamuzaK]

How about this?
New tab button will stick to the bottom edge when scroll bar appears.

.newtab-button-box {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

[Keith94]

I think that's how TST's new tab button works by default. I was thinking of an option for always sticking to the bottom edge.

[asamuzaK]

Oh, I see.

[ghost]

I'm currently using this to make the new tab button stay at the bottom of the window:

/* Make the new tab button stick to the bottom of the window */
#tabbar:not(.overflow) .after-tabs {
  margin-top: auto;
}

I've only tested this for a couple of minutes as it currently seems enough for my needs (I'm in the process of migrating to the new TST, so trying to smooth some of the rougher edges quickly), so it may not possibly work in every use case, but so far it behaved as expected.

[irvinm]

@spash that is a nice solution. Please be sure to add it to the wiki!

[ghost]

@irvinm
I would, but I'm not completely sure about replacing the example which is already present:

https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#always-show-the-new-tab-button-at-the-bottom-edge-of-the-tab-bar-1376

The description claims to be doing the same but it behaves differently - the "new tab" button disappears when tabs don't fill the entire height of the window. I'd say that doesn't quite fit the description, but I'm not sure if there isn't something else I'm missing.

[piroor]

I close this because it is possible with custom stylesheets.