X
Tap here to go to the mobile version of the site.

Support Forum

Multirow tabs

Posted

Hi. I am trying to bring back mi lovely multirow tabs. I've found some information on the web about CSS and file userChrome.css and maybe I could win this war, but Firefox is still beating me all the way :) 1. What I need: I need tabs in multiple rows (3 or 4). If tabs quantity is more than can fit in this rows I want an arrow buttons to scroll this list up and down. All other tabs should be out-of-bound of the tabs container. 2. What I've done:

I maid some changes in userChrome.css like this:
  1. tabbrowser-tabs .tabbrowser-arrowscrollbox {
 display: -webkit-flex !important;  
 height:calc(var(--tab-min-height)*3);

}

  1. tabbrowser-tabs .arrowscrollbox-scrollbox {
 display: -webkit-flex !important;
 /*flex-wrap: wrap !important; was not needed, -webkit-flex wrapped tabs*/
 height:calc(var(--tab-min-height)*2);
 width: 1200px !important;
 box-sizing: content-box;

}

3. What I've got: When I maid my humanity-less experiments in Browser inspector, everything was not so bad. I almost did what I want (see attached screenshot.8.png). I had a limited by 3 rows tab bar. Scroll buttons didn't react on single mouse click but double click scrolled something and somewhere (even with grayed left scroll button). But after Firefox restart I always getting the same: tabs panel looks strange, scroll buttons are absent (see screenshot.9.png). Nothing helps at all but only after comment-and-then-immediately-uncomment "display" property in "#tabbrowser-tabs .arrowscrollbox-scrollbox " section in userChrome.css using Browser inspector I get back to screenshot.8.png.

4. What I ask you: HEEELP! I've never did anything in web, html5 and CSS (learning it for the last 4 days). And I really can't understand different Firefox behavior after restart and then after "reDisplay". It seems like a bug. Help me not to break my keyboard :)

Hi. I am trying to bring back mi lovely multirow tabs. I've found some information on the web about CSS and file userChrome.css and maybe I could win this war, but Firefox is still beating me all the way :) 1. What I need: I need tabs in multiple rows (3 or 4). If tabs quantity is more than can fit in this rows I want an arrow buttons to scroll this list up and down. All other tabs should be out-of-bound of the tabs container. 2. What I've done: I maid some changes in userChrome.css like this: #tabbrowser-tabs .tabbrowser-arrowscrollbox { display: -webkit-flex !important; height:calc(var(--tab-min-height)*3); } #tabbrowser-tabs .arrowscrollbox-scrollbox { display: -webkit-flex !important; /*flex-wrap: wrap !important; was not needed, -webkit-flex wrapped tabs*/ height:calc(var(--tab-min-height)*2); width: 1200px !important; box-sizing: content-box; } 3. What I've got: When I maid my humanity-less experiments in Browser inspector, everything was not so bad. I almost did what I want (see attached screenshot.8.png). I had a limited by 3 rows tab bar. Scroll buttons didn't react on single mouse click but double click scrolled something and somewhere (even with grayed left scroll button). But after Firefox restart I always getting the same: tabs panel looks strange, scroll buttons are absent (see screenshot.9.png). Nothing helps at all but only after comment-and-then-immediately-uncomment "display" property in "#tabbrowser-tabs .arrowscrollbox-scrollbox " section in userChrome.css using Browser inspector I get back to screenshot.8.png. 4. What I ask you: HEEELP! I've never did anything in web, html5 and CSS (learning it for the last 4 days). And I really can't understand different Firefox behavior after restart and then after "reDisplay". It seems like a bug. Help me not to break my keyboard :)
Attached screenshots

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0

More Information

Question owner

Oh, sorry!!! Firefox Quantum 62.0.3 (64-bit) Processor (if needed): AMD Ryzen 5 Huge amount of RAM.

Oh, sorry!!! Firefox Quantum 62.0.3 (64-bit) Processor (if needed): AMD Ryzen 5 Huge amount of RAM.
shiftF12ATweb.de 0 solutions 9 answers
here is the solution! https://github.com/Aris-t2/CustomCSSforFx/issues/192 have fun!