Tabs in multiple rows

Share & showcase
23

It’s so disappointing to me that the devs don’t adequately test their design changes. This is such an obvious problem

24

To be fair, I don’t think it’s an issue until you mess with the css snippets in this thread. The original tabs are kind of fixed-width without these css snippets, and I’m not seeing the same jankyness in another vault without the snippets.

25

Anyоne found a way to swap arrangements of tabs in lower tabs rows?

26

neither of these work anymore. I’m not sure why. Anyone have a solution?

27

kk, fixed it. Just realized the rule changed so copied it like this:


/* hide inactive close button */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button {
  display: none;
}

/* hide active close button */
.workspace .mod-root .workspace-tab-header.is-active:hover .workspace-tab-header-inner-close-button, .workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
  display: none
}

/* another rule to override the app trying to make it flex */
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:hover .workspace-tab-header-inner-close-button {
  display: none;
}

also 3rd rule there for the app seems to override display to flex with that sometimes

Also broken: cannot seem to rearrange tabs at all. Not sure which part of the css breaks it.

1 Like
28

Thank you, this works as of v1.5.3.

29

This is so useful!
Could you make it a plugin, or at least publish in a github gist the whole css?

30

@MatBi here’s what I’m using right now obsidian tabs in multiple rows · GitHub

3 Likes
31

Just found this thread. Very nice! Thank you!

32

Hey @zerkshop do you have an update to your wonderful CSS for 1.8.0?

33

I’m still on 1.7.7

34

With the changes in Obsidian v1.8.0, the previous Tabs in multiple rows CSS stopped working properly.
While I’m not well-versed in CSS so I’m not entirely sure if this is the appropriate solution, after some trial and error,
I found that adding container-type: normal; to .workspace .mod-root .workspace-tab-header seems to make it work correctly.

2 Likes
35

Thanks, works for me!

I also brought back the close button:

.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-close-button {
    display: flex !important;
}
1 Like
36

Hello, with new update of obsidian 1.8.3 my script for enable multiline row not work

.workspace .mod-root .workspace-tab-header {
  flex: none !important;
  width: unset;
  max-width: fit-content;	  /* this can be used so that the max width will wrap to fit in the content	 */ 
  min-width: 20px; /* set the minimum width here */
 /*  border: 1px solid var(--color-base-50); */
 
}

I write a workaround but not work fine as before. someone has find other solutions?

.is-left-sidedock-open .workspace-ribbon.side-dock-ribbon.mod-left::before,
.sidebar-toggle-button:is(.mod-right, .mod-left),
.mod-top .workspace-tab-header-container {
  height: 30px;
  /* background-color: blue !important; /* */
}

.workspace .mod-root .workspace-tab-header {
  padding-bottom: 0px;
  padding-top: 0px;
  /* background-color: green; /* */
}

.mod-top .workspace-tab-header-container-inner {
  margin-top: 0px;
  padding-bottom: 0px;
  /* background-color: yellow;  /* */
}

.workspace .mod-root .workspace-tab {
  flex: 0 1 auto; 
  min-width: 110px; 
  padding: 5px 10px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  margin: 0; 
}
37

did you read the above messages?

38

Multiple rows tabs CSS from this thread broken on Obsidian 1.8.7 upgrade.
Wrote simple CSS code snippets/many-tabs.css | d9k-obsidian-style-guide

.mod-root .workspace-tab-header-container {
  height: unset;
  min-height: 64px;
  --tab-font-size: 15px;
  padding-right: 52px;
}

.mod-root .workspace-tab-header-container-inner {
  flex-wrap: wrap;
}

.mod-root .workspace-tabs .workspace-tab-header {
  width: max-content;
  flex-basis: max-content;
  container-type: initial;
  max-width: 100%;
  flex-shrink: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

.mod-root .workspace-tabs .workspace-tab-header-inner {
  /* for close button if position:absolute */
  padding-right: 16px;
}

.is-hidden-frameless:not(.is-fullscreen):not(.mod-macos) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after {
  height: 40px;
}

.mod-root .workspace-tab-header-spacer {
  display: none;
}

.mod-root .workspace-tab-header-new-tab {
  position: absolute;
  right: 16px;
  top: 30px;
}

.mod-root .workspace-tab-header-tab-list {
  position: absolute;
  right: 0;
  top: 30px;
}

.mod-root .sidebar-toggle-button {
  position: absolute;
  right: 60px;
  top: 30px;
}

.mod-root .workspace-tab-header .workspace-tab-header-inner-close-button {
  height: 100%;
  position: absolute !important;
}

I’m too lazy to fix drag-n-drop. I use hotkeys from Pane Relief extension instead: Swap tab with next/previous in group. Bound it to Ctrl + Shift + Down/Up.