Multiple Row Tabs

alexander.gorbovets

@ingosp you can try my multiline tabs mod:

https://gist.github.com/gorsash/0d4de703a84c620c7280830aba582758

Just append contents of this gist to the end of the common.css file:

On Windows common.css is located at %localappdata%\Vivaldi\Application\VIVALDI_VERSION\resources\vivaldi\style
(replace VIVALDI_VERSION with the currently installed Vivaldi version, for example - 2.2.1388.37).

In latest versions of Vivaldi the new tab button sometimes disappears. But I can sacrifice it to have multirow tabs. I will try to fix it later

Pesala

@alexander-gorbovets It works, but as you say it loses the New Tab button. It also shows two rows with only one tab.

It shows what can be done, but also demonstrates why it is not that easy to implement this feature. Too many areas where bugs could be introduced: Drag & Drop, Stacks, Tiling, Tabs on the side, etc.

People will have to be patient; this feature request is not even tagged as PIPELINE or IN PROGRESS yet. Too much to do, and not enough developers.

Specs: AMD A10-6800K, 8 Gb on Win 10 64-bit 1903 build 18362.388 • Snapshot 2.9.1675.11 (64-bit)

OlegVartanov

@Pesala I've removed this extra row with just margin-bottom: -30px; , but at the cost of Trash Can, now it disappeared) Also I'm using this browser only because of that multi row option.

fpdragon

I brought back the "new tab" button and removed the emty line. It's quick and dirty hack but I still drop it here for those who are interested:

/* multiline tabs */

#tabs-container {
    height: auto !important;
	/* margin-bottom: -30px; */
}
.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: 30px !important;
    width: auto !important;
}
.tab-strip > span > .tab-position > .tab:not(.pinned){
    width: 220px !important;
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
	border-style: solid;
	border-width: 1px;
	border-color: grey;
}
.toolbar-tabbar > .newtab {
    /* right: 0px !important; */
	/* top: 0px !important; */
	right: 0px !important;
    position: absolute;
    width: 30px !important;
	

	
	/* right: 10px !important; */
    /* top: -30px !important; */
    /* position: relative !important; */
    /* display: inline-block; */
    /* padding: 0; */
    /* vertical-align: top; */
	
	/* border-style: solid; */
	/* border-width: 1px; */
	/* border-color: grey; */

}

fpdragon

And some more updates and fixes. The "new tab" moved to the left side. I haven't managed to put it to the right on a stable position. However I don't think that this is such a big deal.

/* 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; */

}

alexander.gorbovets

Mod to make equal width for all tabs including pinned. Width of all tabs is set to 100px. Pinned tabs are marked with asterisk:

/* Equal width tabs without shrinking  */
.tab-strip > span > .tab-position > .tab:not(.pinned){
  width: 100px !important;
}


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


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

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

OlegVartanov

@fpdragon Thanks a lot!

alexander.gorbovets

@fpdragon said in Multiple Row Tabs:

And some more updates and fixes. The "new tab" moved to the left side. I haven't managed to put it to the right on a stable position. However I don't think that this is such a big deal.

Version of this mod without tab borders:

/* 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: none;
 border-width: 0;
 border-color: transparent;
}
.tab-strip > span > .tab-position > .tab.pinned{
    width: 30px !important;
 left: 0px !important;
    position: relative;
    height: 30px !important;
    /* width: auto !important; */

 border-style: none;
 border-width: 0;
 border-color: transparent;
}
.toolbar-tabbar {
 /* width: 30px; */

 /* border-style: none; */
 /* border-width: 0; */
 /* border-color: lime; */
}
.toolbar-tabbar > .newtab {
 top: 0px !important;
 left: 0px !important;
    position: absolute !important;

 /* border-style: solid; */
 /* border-width: 1px; */
 /* border-color: red; */


}

sabine

@fpdragon Hi, I like this mod very much and it brings me back to Vivaldi after I've ignored it for a long time just because of this missing feature.
Thank you very much for the work!!
Regarding the "New Tab" button... is it possible to "glue" it to the Trash icon? I'm not an expert at programming. Just a question as I'm so used to having it at the right side.

Regards,
Sabine

ButterSig

Thanks for updating the code @fpdragon and @alexander-gorbovets - Vivaldi is now usable for me again!

Is it possible to have the tabs stretch to fit the row? Or some kind of max width? The latest code posted by Alexander seems to keep the tabs at a specific width no matter how many tabs fill the tab bar.

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)?

Thanks,
Sabine

sabine

@sabine said in Multiple Row Tabs:

@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