For me too it is badly misaligned. Somehow my FF got updated to v65.
I downgraded to v64 and it is working fine on MAC now. Also, disabled automatic updates.
Thanks so much! Fixed the hidden last row with the latest v65.0.
No fixed for me (35, 30, 20 no help).
Help Firefox 60.5.2esr.
This has broken again in v66. Can we get native multi-row tabs please, Mozilla?
Any idea why I now have a scroll bar one I exceed 3 tab rows?
Also, is the gap on the left normal? The min,max,close buttons also get bigger the more tabs I have open.
Resizable windows have a âdrag spaceâ on the left in case you want to drag the window somewhere. You can close that up using a style rule, but I donât have it at my fingertips. You could search or ask on https://www.reddit.com/r/FirefoxCSS/ .
As geekoid already mentioned: the solutions in this thread broke again when v66 came out. This starts to get annoying.
But for now this fixed everything for me:
multi-row_tabs.css from the firefox-csshacks github
Has this broken again on FF69? Yes! Please see the end of this post.
My tabs are all on one line. I am using
with
@namespace url(âhttp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xulâ);
added to the top of the useChrome.css file.
(And I tried it without that too).
Aha! FF69 turns off userChrome.css unless you change something in about:config, apparently.
That worked. Or almost, I could not âfindâ the relevant key in about config (not sure why, perhaps there is a minor change or did I search in the wrong way?) but scrolled down to toolkit.legacyUserProfileCustomizations and changed the value to true (by clicking on it).
I now have multi-row tabs back after two hours of trying.
I wish Firefox would tell us when they do something like this (âThis update also changesâŚâ).
Everything is broken again in v71. I can not find why but tabs are in one line while all changes from userChrome.css are present in tabs and scrollbar propetrties. Have anybody seen the same with last beta or nightly?
Have you made sure that the toolkit.legacyUserProfileCustomizations.stylesheets
pref in the about:config
is still set to true
?
You are right, spytev.
I spent a couple of hours or more getting multirow tabs to work in FF69 now in FF71 it is broken again!
I have made sure that toolkit.legacyUserProfileCustomizations.stylesheets is still set to true.
This is awful. What are Mozilla thinking about?
Aha MrOtherGuy has provided updated css that works in FF71 here
It is a shame that we need to jump through these hoops to get such basic functionality.
Been trying to get tabs back for a couple weeks. Thanks for posting the setting to update. Worked great!
Hi all.
This is very frustrating - losing functionality when updating!
Could someone post a full updated method to get the multiple row functionality working.
Iâve read this thread but I am struggling to piece together all the steps.
Im on FF71.0.
Same hereâŚ
my TabMix worked for month now. But since yesterday it stopped working.
No additional rows. I am not very used on how to make manual fixes myself.
In my âuserChrome.cssâ, I have this info:
.tabbrowser-tab:not([pinned]) {min-width:35px;max-width:35px;}
.tabbrowser-tab,.tab-background {height:var(--tab-min-height);}
.tab-stack {width: 100%;}
#tabbrowser-tabs .scrollbox-innerbox {display: flex;flex-wrap: wrap;}
#tabbrowser-tabs .arrowscrollbox-scrollbox {overflow: visible;display: block;}
#titlebar,#titlebar-buttonbox{height:var(--tab-min-height) !important;}
#titlebar{margin-bottom:calc(var(--tab-min-height)*-1) !important;}
#main-window[sizemode="maximized"] #titlebar{margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;}
#main-window[sizemode="maximized"] #TabsToolbar{margin-left:var(--tab-min-height);}
#titlebar:active{margin-bottom:0 !important;}
#titlebar:active #titlebar-content{margin-bottom:var(--tab-min-height) !important;}
#tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){display: none;}
My FF: 71.0 (64-Bit)
What & how should I make changes?
Please help. Thanks.
You should change your userChrome.css to the updated:
/* Makes tabs to appear on multiple lines /
/ Tab reordering will not work and canât be made to work /
/ You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/
/* Itâs recommended to move tabs new-tab-button outside tabs toolbar */
/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll /
/ This maximum visible rows wonât work before Fx66 /
/ So this setting does nothing on Fx65 and all tab rows will be shown /
:root{
âmultirow-n-rows: 3;
âmultirow-tab-min-width: 100px;
âmultirow-tab-dynamic-width: 1; / Change to 0 for fixed-width tabs using the above width. */
}
/* Scrollbar canât be clicked but the rows can be scrolled with mouse wheel /
/ Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */
/* .tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */
/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */
#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important
}
/* Selectors for Firefox 71+ /
/ These are not tabs toolbar specific but horizontal scrollbox isnât used elsewhere, except in bookmarks toolbar but there it doesnât have [part] attribute since itâs not in shadow-root */
@-moz-document url(chrome://browser/content/browser.xhtml){
.scrollbutton-up[orient=âhorizontalâ][part]~spacer,
.scrollbutton-up[orient=âhorizontalâ][part],
.scrollbutton-down[orient=âhorizontalâ][part]{ display: none }
scrollbox[part][orient=âhorizontalâ]{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(âtab-min-height) * var(âmultirow-n-rows));
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
}
}
/* Test for Firefox > 66 */
@supports (inset-block:auto){
#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(âtab-min-height) * var(âmultirow-n-rows));
scrollbar-color: var(âtoolbar-bgcolor) var(âlwt-accent-color);
scrollbar-width: thin;
}
#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
}
/* Test for Firefox < 66 */
@supports not (inset-block:auto){
#tabbrowser-tabs > .tabbrowser-arrowscrollbox{
min-height: unset !important;
}
#tabbrowser-tabs .scrollbox-innerbox{
display: flex;
flex-wrap: wrap;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
}
}
.tabbrowser-tab{ height: var(âtab-min-height); }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}
.tabbrowser-tab[fadein]:not([pinned]){
min-width: var(âmultirow-tab-min-width) !important;
flex-grow: var(âmultirow-tab-dynamic-width);
/*
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
Donât set to none or youâll see errors in console when closing tabs
*/
/max-width: 100vw !important;/
}
.tabbrowser-tab > stack{ width: 100%; height: 100% }
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }
Done for me FF71 64 debian
:root {--max-tab-rows: 5;--tab-growth: 2}
.tabbrowser-tab:not([pinned]) {flex-grow: var(--tab-growth)}
.tabbrowser-tab::after {border: none !important}
:root:-moz-lwtheme[lwtheme-image] {background-repeat: repeat-y !important}
#tabbrowser-tabs .tab-background {max-height: var(--tab-min-height) !important; min-height: var(--tab-min-height) !important}
@media (-moz-os-version: windows-win10) {
#tabbrowser-tabs .tab-background, #tabbrowser-tabs .tabbrowser-tab {min-height: calc(var(--tab-min-height) + 1px) !important}
}
#main-window[sizemode="normal"] .tabbrowser-tab .tab-line,
#main-window[sizemode="maximized"] .tabbrowser-tab .tab-line,
#main-window[sizemode="fullscreen"] .tabbrowser-tab .tab-line,
:root[uidensity="touch"] .tabbrowser-tab .tab-line,
:root[uidensity="compact"] .tabbrowser-tab .tab-line {transform: translate(0,1px) !important}
.tab-stack {width: 100%}
#tabbrowser-tabs .tabbrowser-arrowscrollbox {overflow: visible; display: block}
:root[uidensity="touch"] .tabbrowser-tab,
:root[uidensity="touch"] .tab-stack {
min-height: calc(var(--tab-min-height) + 3px) !important;
max-height: calc(var(--tab-min-height) + 3px) !important;
margin-bottom: 0 !important}
:root[uidensity="touch"] #tabbrowser-tabs .arrowscrollbox-scrollbox {
min-height: var(--tab-min-height) !important;
max-height: calc((var(--tab-min-height)*var(--max-tab-rows)))}
@media (-moz-os-version: windows-win10) {
.titlebar-buttonbox, #titlebar-buttonbox {
display: block !important; height:var(--tab-min-height) !important}}
#alltabs-button, :root:not([customizing]) #TabsToolbar #new-tab-button, .tabbrowser-tab::after {display: none}
#tabbrowser-tabs .tabbrowser-arrowscrollbox { overflow: visible; display: block;}
scrollbar {-moz-window-dragging: no-drag !important}
scrollbox {
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: auto;
min-height: var(--tab-min-height);
max-height: calc(var(--tab-min-height)* var(--max-tab-rows));
}
.arrowscrollbox-overflow-start-indicator,
.arrowscrollbox-overflow-end-indicator {position: fixed !important}
.scrollbutton-up, .scrollbutton-down, spacer {display: none !important}