Multiple Row Tabs

sabine

@fpdragon
I've managed to make the tabs a bit shorter, so they do better fit my (wide) screen and still remain readable (and this even although I have no clue of programming ).
One more question: is it possible to limit the number of visible lines to 3 lines and in case there are more tabs than fit on 3 lines, have a slider to move the invisible lines up (and down)?

Dear @fpdragon and/or @alexander-gorbovets,

Happy New Year to you !

did you see my 2 contributions to this subject some 3 weeks ago?
Would love to hear your opinion to my sugestions.

Thanks,
Sabine

A Former User

@sabine I'm sorry for not responding earlier, I was ignoring this thread as it produced too many comments.

I'm not sure if we can help you until you show us the code — every little change has impact (though sometimes not so big) and there are also many versions and I don't know which one you are using.

sabine

@potmeklecbohdan No problem :-). There's no hurry. Thank you for answering.

I'm using the code that was originally published by fpdragon and/or alexander.gorbovets on nov.15:

}
.resize {
  display: block !important;
}
.tab-strip {
  display: block;
}
.tab-strip > span {
  display: inline-block;
}
.tab-strip > span > .tab-position {
  left: 0px !important;
  position: relative;
  height: auto !important;
  width: auto !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
  width: 120px !important;
}


.tab-strip > span > .tab-position > .tab.pinned{
  width: 120px !important;
}

.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
  content: '*';
  font-family: "Courier New", serif;
  margin-bottom: -20px;
}


.tab-strip > .newtab {
  left: 0px !important;
  top: 0px !important;
  position: relative !important;
  display: inline-block;
  padding: 0;
  vertical-align: top;
}
.tab-header > .favicon > svg {
  height: 17px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title, #tabs-container .tab.pinned.tab-mini .tab-header .title {
 display: flex !important;
}
/* multiline tabs */

#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;

	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: green; */
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position:first-child{
    left: 30px !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
	
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar {
	/* width: 30px; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: lime; */
}
.toolbar-tabbar > .newtab {
	top: 0px !important;
	left: 0px !important;
    position: absolute !important;
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: red; */

}

Thanks,
Sabine

modedit Fixed the code block

A Former User

@sabine Sorry, but I cannot read or copy it easily now and it wastes quite much space on the page. Please add an otherwise empty line like this (see below) before and after the code (edit the post, do not make a new one).

```

sabine

@potmeklecbohdan

I don't know how to edit my message, but maybe this works :


}
.resize {
  display: block !important;
}
.tab-strip {
  display: block;
}
.tab-strip > span {
  display: inline-block;
}
.tab-strip > span > .tab-position {
  left: 0px !important;
  position: relative;
  height: auto !important;
  width: auto !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
  width: 120px !important;
}


.tab-strip > span > .tab-position > .tab.pinned{
  width: 120px !important;
}

.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
  content: '*';
  font-family: "Courier New", serif;
  margin-bottom: -20px;
}


.tab-strip > .newtab {
  left: 0px !important;
  top: 0px !important;
  position: relative !important;
  display: inline-block;
  padding: 0;
  vertical-align: top;
}
.tab-header > .favicon > svg {
  height: 17px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title, #tabs-container .tab.pinned.tab-mini .tab-header .title {
 display: flex !important;
}
/* multiline tabs */

#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;

	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: green; */
}
.tab-strip > span {
    display: inline-block;
}
.tab-strip > span > .tab-position {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position:first-child{
    left: 30px !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
	
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar {
	/* width: 30px; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: lime; */
}
.toolbar-tabbar > .newtab {
	top: 0px !important;
	left: 0px !important;
    position: absolute !important;
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: red; */

}

A Former User

@sabine You can edit a post by right-clicking the three dots in bottom right corner and choosing edit.

Here is the code:

For newer version see later post

/* multiline tabs */
#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
}
.tab-strip {
    display: block;
    position: relative;
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-color: green; */
    max-height: 90px;
    overflow-y: scroll;
}

.tab-strip::-webkit-scrollbar {
    background: transparent;
    border: none;
    width: 10px;
    height: 0;
}
.tab-strip::-webkit-scrollbar-corner,
.tab-strip::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}
.tab-strip::-webkit-scrollbar-button {
    display: none;
}
.tab-strip::-webkit-scrollbar-thumb {
    width: 10px;
    border: none;
    border-radius: min(5px, var(--radius));
}

.tab-strip > span {
    display: inline-block;
}

.tab-strip > span > .tab-position {
    left: 26px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}

.tab-strip > span > .tab-position > .tab {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
    border: 1px solid grey;
}
.tab-strip > span > .tab-position > .tab:not(.pinned) {
    width: 220px !important;
}
.tab-strip > span > .tab-position > .tab.pinned {
    width: 30px !important;
}

.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
    content: '*';
    font-family: "Courier New", serif;
    margin-bottom: -20px;
}

.tab-header > .favicon > svg {
    height: 17px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title,
#tabs-container .tab.pinned.tab-mini .tab-header .title {
    display: flex !important;
}

.toolbar-tabbar > .newtab {
    top: 0px !important;
    left: 0px !important;
    position: fixed !important;
    display: inline-block;
    padding: 0;
    vertical-align: top;
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-color: red; */
}
.toolbar-tabbar > .newtab > button {
    margin-right: 0 !important;
    height: 26px !important;
    width: 26px !important;
    min-height: 26px !important;
    min-width: 26px !important
}

sabine

@potmeklecbohdan
The code does not yet work. I can still produce 50 tabs and 11 rows are created and visible. So no limitation to the rows.
I've probably not sufficiently made clear my point. I suggested an enhancement of the code so the number of tab-rows shown is limited to a predefined number. The number of rows (e.g. 3 or 4) can be configured in the code. Should there be more tabs than would fit within the 3 rows, there should pop-up a slider at the right that can be pulled up (or down) to see the next tab row. Like it used to be in old FF.

Regards

A Former User

@sabine I understand you very well and you can be sure that I wouldn't give you the code if it didn't work for me. There must be some difference between our setups that breaks it for you (and for me it makes it impossible to give you code that works for you).

sabine

@potmeklecbohdan Thank you very much for your efforts. I'll try to find out what the reason is and will let let you know, so other users can benefit from our findings. Have a nice evening.

Sabine

sabine

@potmeklecbohdan forgot to ask... where is the line in your code to configer the number of rows?

A Former User

@sabine max-height: 90px;, line 14

sabine

@potmeklecbohdan I've just installed the latest build and now it works (more or less ). The scrollbar is now shown at the right, that's fine. But it is without function. The slider cannot be moved down (or up) hence the "hidden" tab lines cannot be "pulled up". Scrolling works though with the scrollwheel of the mouse when the mouse is hoovered over a tab row.
Also the "New Tab"-button has disappeared.

I hope my feedback is of any help.

Rgds,
Sabine

A Former User

@sabine Ah yes, I see. Should work now.

/* multiline tabs */
#tabs-container {
    height: auto !important;
}
.resize {
    display: block !important;
    -webkit-app-region: none;
}
.tab-strip {
    display: block;
    position: relative;
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-color: green; */
    max-height: 90px;
    overflow-y: scroll;
}

.tab-strip::-webkit-scrollbar {
    background: transparent;
    border: none;
    width: 10px;
    height: 0;
}
.tab-strip::-webkit-scrollbar-corner,
.tab-strip::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}
.tab-strip::-webkit-scrollbar-button {
    display: none;
}
.tab-strip::-webkit-scrollbar-thumb {
    width: 10px;
    border: none;
    border-radius: min(5px, var(--radius));
}

.tab-strip > span {
    display: inline-block;
}

.tab-strip > span > .tab-position {
    left: 26px !important;
    position: relative;
    height: 30px !important;
    width: auto !important;
}

.tab-strip > span > .tab-position > .tab {
    left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */
    border: 1px solid grey;
}
.tab-strip > span > .tab-position > .tab:not(.pinned) {
    width: 220px !important;
}
.tab-strip > span > .tab-position > .tab.pinned {
    width: 30px !important;
}

.tab-strip > span > .tab-position > .tab.pinned > .tab-header > span.title:before {
    content: '*';
    font-family: "Courier New", serif;
    margin-bottom: -20px;
}

.tab-header > .favicon > svg {
    height: 17px;
}

#tabs-container .tab.tab-small.tab-mini .tab-header .title,
#tabs-container .tab.pinned.tab-mini .tab-header .title {
    display: flex !important;
}

.toolbar-tabbar > .newtab {
    top: 7px !important;
    left: 30px !important;
    position: fixed !important;
    display: inline-block;
    padding: 0;
    vertical-align: top;
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-color: red; */
}

sabine

@potmeklecbohdan Hi, slider works now and... the "New Tab" button is back. Thanks a lot :-). However, the button is not at his correct position, see screenshot.

A Former User

@sabine Play with the 7px and 30px near the end.

sabine

@potmeklecbohdan
Done! Works perfectly. Your my HERO :-). Thanks a lot again for your help.
One question: the "closing X" only pops up when hoovering over the active tab and not when hoovering over an non-active tab. This used to be the case in the non-modified version. (I've activated the option in settings).

A Former User

@sabine What's the question? confused

sabine

@potmeklecbohdan the question is, how to get back the "closing cross" on the non-activated tabs? I mean only while hoovering over the tab, of course.

A Former User

@sabine No such problem here

sabine

@potmeklecbohdan hmm... I must admit that I modified the width of the tabs from originally 220 px to 170 px to have 7 instead of 5 tabs in one row. I just changed it back to 220, but the closing-cross does not pop up when hoovering. It only shows up when hoovering the active tab. But strange enough, the title of the active tab disapears when hoovering over the tab. So only the closing-cross is left over on the tab. Strange that, isn't it?

I've just deleted some tabs and everything is normal again. Closing crosses pop up when hoovering and the title in the active tab remains visible :-). I changed the width of the tabs back to 170px and still everything works well. Then I increased the number of tabs again and the same "funny" thing happened anew. I did some testing and it turns out, that it happens when the number of tabs is more than 18 tabs. Could you verify this on your system, please (if you have time to do so)?
Thanks

I've installed a brandnew Vivaldi (latest build) on my second computer. Here the same thing happens. From a certain number (21) of tabs the "closing cross" disappear from all non-active tabs. However the tab title does not appear when hoovering over it. I assume it is probably a bug in Vivaldi. Is there a place where I can report this?
Thanks

Found it! (blind me... )... and reported it.