Multiple Row Tabs

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.

sabine

@potmeklecbohdan open 20 tabs and see what happens with the crosses on the tabs (just nosy if it only happens here).

YamiryuuZero

I have been asking for multiple tab rows for a while now. Really would help with my job, since I could separate between what I need for my work and what I use for leisure!

A Former User

@YamiryuuZero I think you're looking for Tab Groups instead. Right now you can use

alexander.gorbovets

@YamiryuuZero

It would be great to have this feature built into Vivaldi.
Fortunately multiline rows could be achieved by using the CSS mod:

https://gist.githubusercontent.com/gorsash/8e480a2bf2720053d130a2e94a4c4d46/raw/1df1874844a61e6814a2f12fa6cda8e166fb3ebe/multiline-equal-size-tabs.css

Installation. Applies to Vivaldi 2.6 and above:

Save the link above (open it and press ctrl+s) to some folder where you will store all your Vivaldi mods.
Open vivaldi://experiments
Enable "Allow for using CSS modifications"
Open Appearance section in settings
Choose the folder in which you saved the CSS mod
Restart Vivaldi to see the mod in effect

More information on Vivaldi CSS mods: https://forum.vivaldi.net/topic/10549/modding-vivaldi

Known issues:

Moving tabs by drag and drop works not ideally. Perhaps some JS modifications should be performed to fix it or maybe even browser's source code should be modified.
The new tab button is in a different location than by default.

pryley

@LonM Why not just change the tabs setting to stack on the right? This is what I would do when using the browser in a vertical configuration. You can enable tab preview on hover, and make the tab bar width smaller.

tehseano

@alexander-gorbovets How could I modify this to JUST change the width of pinned tabs without adding the multi-row functionality? My goal is to take advantage of the pinned-stacked tabs workaround and give myself a wider pinned tab to work with. Speaking of stacked tabs, can it be made to show the tab stacks on the pinned tab still? It seems to hide them with the mod installed. I'm new to Vivaldi and have CSS experience, just not familiar with Vivaldi's layout design. Anything by chance you can save me a few hours of trial and error with?

nomadic

@tehseano You can get a good understanding of Vivaldi's UI layout by inspecting the elements of the interface.

For Inspecting UI Elements:

Go to vivaldi://flags
Find the flag "Debugging for packed apps"
Enable this flag and restart the browser
Now you can right click on a part of the UI, the address bar for example, and hit inspect near the bottom of the context menu.

This will allow you to find the css selector you need to customize the interface

alexander.gorbovets

@tehseano actually this css mod consists of two mods. One sets width of pinned tabs to be the same as normal. Another adds multiline tabs.
I posted them earlier separately. And in the latest css file that parts are marked by comments

/* Equal width tabs without shrinking */

and

/* Multiline Tabs */

Perhaps you need the first one. You will need to change it so it will not set fixed widths for pinned tabs but instead override theirs width property to the same value which regular tabs have. Because fixed width tabs have no sense without tab scrolling like in FF or multiline tabs.

I’m not sure that it’s possible to implement stacking of pinned tabs with only css modifications. But you can try by using Web inspector like it was advised in the post above

smihaila

Man, this solution sucks. I won't switch to Vivaldi until I see an officially-supported, and easy to use multi-row tabs solution.

I'll keep using my trusty PaleMoon web browser until then.