Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

how can i disable tab scrolling

  • 14 replies
  • 2 have this problem
  • 19 views
  • Last reply by PBY

more options

i open too many tabs i can't use firefox with hidden tabs that wastes my time and i can't deal with it, and there is no way from firefox i found on the web explaing that ? is there anyway to disable that

i open too many tabs i can't use firefox with hidden tabs that wastes my time and i can't deal with it, and there is no way from firefox i found on the web explaing that ? is there anyway to disable that

All Replies (14)

more options

I had hidden tabs too. One can just shut them down by for instance using right click on the rightmost displayed one and then select close tabs to the right, to close all the others that are scrolled off screen.

Alternatively, I use multi-row tabs (which I think should be the default or at least an option), to show all the tabs that are open. This is great. My firefox can easily display three or four lines of tabs, which is enough for me. It prevents scrolling.

The procedure for getting multirow tabs is not all that easy but it is worth it. Good luck.

(By the way, how does one change ones avatar here?)

First of all since firefox 69 or so, you first have to open the detailed settings at about:config and change toolkit.legacyUserProfileCustomizations to true

Then open the "Profile Folder" by opening the Firefox menu near the top right, using the three horizontal bars icon, clickon help and Troubleshooting Information, and then "Open Folder" mine is

C:\Users\Mywindowsusername\AppData\Roaming\Mozilla\Firefox\Profiles\w4qfqwv3.default

Then create (or move to) the "chrome" (yes, chrome!) subfolder inside it, and create or edit a file inside that called UserChrome.css

Insert into the above named file the following code which I got from https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

/* 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  */
/* Scrollbar can't be clicked but the rows can be scrolled with mouse */
/* 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 }

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

/* 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: 100px !important;
  flex-grow: 1;
  /*
  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 }

Modified by cor-el

more options

You can possibly modify a pref on the about:config page to decrease the minimum tab width and allow tabs to shrink more.

  • browser.tabs.tabMinWidth

You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.

There is also the "List all tabs" button at the far right on the Tab bar for a list of all open tabs.

Modified by cor-el

more options

Timtak said

I had hidden tabs too. One can just shut them down by for instance using right click on the rightmost displayed one and then select close tabs to the right, to close all the others that are scrolled off screen. Alternatively, I use multi-row tabs (which I think should be the default or at least an option), to show all the tabs that are open. This is great. My firefox can easily display three or four lines of tabs, which is enough for me. It prevents scrolling. The procedure for getting multirow tabs is not all that easy but it is worth it. Good luck. (By the way, how does one change ones avatar here?) First of all since firefox 69 or so, you first have to open the detailed settings at about:config and change toolkit.legacyUserProfileCustomizations to true Then open the "Profile Folder" by opening the Firefox menu near the top right, using the three horizontal bars icon, clickon help and Troubleshooting Information, and then "Open Folder" mine is C:\Users\Mywindowsusername\AppData\Roaming\Mozilla\Firefox\Profiles\w4qfqwv3.default Then create (or move to) the "chrome" (yes, chrome!) subfolder inside it, and create or edit a file inside that called UserChrome.css Insert into the above named file the following code which I got from https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css /* 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 */ /* Scrollbar can't be clicked but the rows can be scrolled with mouse */ /* 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 }
  1. tabbrowser-tabs{
min-height: unset !important; padding-inline-start: 0px !important } /* 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); }
  1. tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important; margin-inline-start: 0px !important; } .tabbrowser-tab[fadein]:not([pinned]){ min-width: 100px !important; flex-grow: 1; /* 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% }
  1. tabbrowser-tabs .scrollbutton-up,
  2. tabbrowser-tabs .scrollbutton-down,
  3. alltabs-button,
root:not([customizing]) #TabsToolbar #new-tab-button,
  1. tabbrowser-tabs spacer,
.tabbrowser-tab::after{ display: none !important }


i don't understand coding would u please make a video illustrating that and also this link

https://indronilanik.wordpress.com/2017/08/22/disable-tab-scrolling-from-firefox-without-using-any-extension/

i dont know how to make PROFILE-NAME what the profile name mean my windows username or what? is there a video illustrating that

more options

and also how to enable multi row ? what is the way

more options

actually i don't know why mozilla didn't add these features what should we do so mozilla add them the app ? why do i have to look for unusual ways to get what i want and might work might not

more options

The link that you posted is showing the same solution as I am suggesting.

However it is a bit old so it does not have step one (which has become necessary since this year).

> i don't know how to make PROFILE-NAME what the profile name mean my windows username or what? is there a video illustrating that

You don't have to make profile name, Nor do you have to be able to program, but can follow the steps that I mention above. I have written them again, a little more clearly below.

1) Type about:config in the place in your Firefox browser where there is usually a ULR beginning with http: You will be warned against entering but enter anyway and change the entry toolkit.legacyUserProfileCustomizations to true by double clicking upon it.

2) Open the "Profile Folder" by opening the Firefox menu near the top right, (using the three horizontal bars icon), click on "help" and then "Troubleshooting Information", and then on the "Open Folder" next to the Profile Folder entry in the table shown.

That will open a folder inside your computer.

Then you need to create a directory called "chrome," by right clicking in that directory, and file UserChrome.css inside the new "chrome" directory.

To create this file, first create a text file using notepad, paste the content I mention above (no need to "program" just copy and paste) into that file. The content of the file was supplied

and then go to the folder and change the file type from ".txt" to ".css"

Then restart your browser and you should have multi-row tabs like me (please see attached image).

I am using a different computer now. This computer has the following inside UserChrome.css (I am not sure where I got it from, sorry).

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/*
/* --------------  Fixing the tabs in FF 57 in order to have more than one row of tabs  ------------------------------------------------ */

#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}

.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
  display: none !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
    flex-grow: 1;
    flex-wrap:wrap;
    min-width: 150px;
    vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
    height: var(--tab-min-height);
}

#tabbrowser-tabs .tabbrowser-tab .tab-stack {
    width: 100%;
}

#titlebar-buttonbox {
 display: block !important;
 vertical-align: top !important;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
   -moz-window-dragging: no-drag;
} 


If I have time I will create a video but, I may not have time.

Modified by cor-el

more options

sinfulslave said

actually i don't know why mozilla didn't add these features what should we do so mozilla add them the app ? why do i have to look for unusual ways to get what i want and might work might not

It is strange. In the past there was an add-on called "Tab Mix Plus" which did this for us. But that was prevented from operating and Mozilla does not seem to want to add this feature to the main app itself.

I think perhaps because it will make Firefox slow and more likely to crash if we have so many tabs open at once.

So now we have to do strange things to get this basic functionality.

I use Firefox because I can still have multi row tabs, if use this "unusual way."

more options

Timtak said

sinfulslave said
actually i don't know why mozilla didn't add these features what should we do so mozilla add them the app ? why do i have to look for unusual ways to get what i want and might work might not

It is strange. In the past there was an add-on called "Tab Mix Plus" which did this for us. But that was prevented from operating and Mozilla does not seem to want to add this feature to the main app itself.

I think perhaps because it will make Firefox slow and more likely to crash if we have so many tabs open at once.

So now we have to do strange things to get this basic functionality.

I use Firefox because I can still have multi row tabs, if use this "unusual way."


there is a simple way i have mentioned above by creating new folder and file css if u could explain this way it should work

more options

See these articles about userChrome.css which were written by one of our most prolific support contributors. https://www.userchrome.org/what-is-userchrome-css.html https://www.userchrome.org/how-create-userchrome-css.html https://www.userchrome.org/help-with-userchrome-css.html

more options

i think they don't work with firefox 70 i found this but not working for current firefox

https://www.youtube.com/watch?v=WWvYK1PW68c

more options

the-edmeister said

See these articles about userChrome.css which were written by one of our most prolific support contributors. https://www.userchrome.org/what-is-userchrome-css.html https://www.userchrome.org/how-create-userchrome-css.html https://www.userchrome.org/help-with-userchrome-css.html


removing scrollbar not working

i used this way

https://www.youtube.com/watch?v=WWvYK1PW68c

and edit the conf toolkit.legacyUserProfileCustomizations.stylesheets, double-click on "false" to change it to "true". Quit FF and reopen, the scripts should have loaded.

and removing scrollbar didn't work

and even this way didn't work

the multi raw code only worked that Timtak mentioned

more options

sinfulslave said

i think they don't work with firefox 70 i found this but not working for current firefox https://www.youtube.com/watch?v=WWvYK1PW68c

He does not include my step 1 above because it was sometime in Autumn this year (two or three months ago) that the need to change about:config toolkit.legacyUserProfileCustomizations became necessary. But he explains the rest so if you have done that then all you need to do is enter about:config, click through the warning, scroll down to toolkit.legacyUserProfileCustomizations, double click it, and restart your browser!

Tim

more options

Okay, I made a video https://youtu.be/i-y56-Xrpts I uploaded it again because the sound was so quiet. I hope that works.

Tim

Modified by Timtak

more options

Bring back Tab Mix Plus! Or at least the customization it enabled. And and Colorful Tabs (that actually works as it used to) Why follow Chrome? Would rather have a a utility truck more than a race car (or to supplement the latter).

Running Quantum portable 71. along with FF ESR and Waterfox and Basilisk. Thank God for such.

Modified by PBY