[SOLVED] CSS customization for tab width now leaves gaps

User Help for Mozilla Firefox
Post Reply
Da Rossa
Posts: 175
Joined: June 22nd, 2006, 2:03 am

[SOLVED] CSS customization for tab width now leaves gaps

Post by Da Rossa »

Until some past Firefox version, I used to use this nice userChrome.css addition to make my tabs wider:

Code: Select all

.tabbrowser-tab:not([pinned]) {
max-width: 100% !important;
min-width: 140px !important;
}
...and the effect was awesome: when only a few tabs were open, they took a good space so that I could read their titles; when I had a lot of them, they would just shrink without activating the < and > buttons to cycle.

Now that CSS works erratically: I can set some higher value for the min-width, but if I close a tab from the middle of the bar, it will leave the space open and empty, without the remaining tabs automatically resizing to fill that void:

Image

What should I do? :)
Last edited by Da Rossa on July 29th, 2019, 1:39 pm, edited 1 time in total.
Brummelchen
Posts: 4480
Joined: March 19th, 2005, 10:51 am

Re: CSS customization for tab width now leaves gaps

Post by Brummelchen »

try

.tabbrowser-tab:not([pinned])
{
max-width: 140px !important;
min-width: 140px !important;
}

the current definition contains

max-width: 225px;
min-width: var(--tab-min-width);

per cent is never good as long you dont know the upper containers width.
Da Rossa
Posts: 175
Joined: June 22nd, 2006, 2:03 am

Re: CSS customization for tab width now leaves gaps

Post by Da Rossa »

I already did. So I took your code and changed slightly to this:

Code: Select all

.tabbrowser-tab:not([pinned])
{
max-width: 800px !important;
min-width: 140px !important;
}
Look at the behaviour in three parts in this short screencast:
1 - opening tabs - everything works as expected: the width reduces on demand;
2 - closing tabs - something wrong there: it's leaving gaps;
3 - opening tabs after closing some: tabs open at wrong positions.

What can be wrong? Maybe a about:config I messed?

Image
Brummelchen
Posts: 4480
Joined: March 19th, 2005, 10:51 am

Re: CSS customization for tab width now leaves gaps

Post by Brummelchen »

try safe mode and kick all other css code.
your code above is NOT responsible for gap!

value in prefs is this one

min-width: var(--tab-min-width);

thats reason why firefox is using such "value", min-width dont need any specific value if you have set it in prefs.
Da Rossa
Posts: 175
Joined: June 22nd, 2006, 2:03 am

Re: CSS customization for tab width now leaves gaps

Post by Da Rossa »

OK I ran Firefox on safe mode, but the userChrome.css doesn't activate in that mode.

I took out all of my CSS additions and tried. Then I reinserted each one to see if they could create a problem. The problem only reemerged when I inserted the piece of code in question.

Then I manually disabled all my extensions. Still, the behaviour persists.

This is my entire userChrome.css file. The part in question is in the bottom. Can you see if there is anything out of place?

Code: Select all

/* REMOVE CONTEXT MENU ELEMENTS */

#context-navigation, #context-sep-navigation { 
    display: none !important 
}

#context-savepage, { 
    display: none !important 
}

#context-selectall, { 
    display: none !important 
}

#context-savelinktopocket, { 
    display: none !important 
}

#urlbar {
font-family: Inconsolata, Arial, "Open Sans", monospace !important; 
font-size: 1.4em !important; 
/* height: 18pt !important;*/
}

/* LEGIBLE TOOLTIP ON BOTTOM LEFT CORNER WHEN HOVERING OVER LINKS */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
statuspanel { 
min-width: 5% !important; 
max-width: 90% !important; 
pointer-events: none !important 
}

#statuspanel-label {
border: none !important;
background: #111 !important;
color: #0F0 !important;
font-family: Inconsolata, monospace !important;
font-size: 1.8em !important;
}

/* BACKGROUND COLOR WHILE LOADING PAGE */
browser { 
	background-color: #DDD !important; 
}

/* MAX TABS WIDTH */
.tabbrowser-tab:not([pinned])
{
max-width: 600px !important;
min-width: 140px !important;
}
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: CSS customization for tab width now leaves gaps

Post by jscher2000 »

When you close a tab, the fadein attribute is removed, but collapsed is not always set for some reason, and in that case, this rule makes it invisible:

Code: Select all

.tabbrowser-tab:not([pinned]):not([fadein]) {
  max-width: 0.1px;
  min-width: 0.1px;
  visibility: hidden;
}
However, your rule is overriding the tiny width on that ghost element. To avoid that, only apply your rule to tabs that have a fadein attribute:

Code: Select all

/* MAX TABS WIDTH */
.tabbrowser-tab[fadein]:not([pinned]) {
    max-width: 600px !important;
    min-width: 140px !important;
}
Da Rossa
Posts: 175
Joined: June 22nd, 2006, 2:03 am

Re: CSS customization for tab width now leaves gaps

Post by Da Rossa »

jscher2000 wrote:When you close a tab, the fadein attribute is removed, but collapsed is not always set for some reason, and in that case, this rule makes it invisible:

Code: Select all

.tabbrowser-tab:not([pinned]):not([fadein]) {
  max-width: 0.1px;
  min-width: 0.1px;
  visibility: hidden;
}
However, your rule is overriding the tiny width on that ghost element. To avoid that, only apply your rule to tabs that have a fadein attribute:

Code: Select all

/* MAX TABS WIDTH */
.tabbrowser-tab[fadein]:not([pinned]) {
    max-width: 600px !important;
    min-width: 140px !important;
}
My God, you're a wizard!!
Thanks jscher2000!
Wiggam72
Posts: 451
Joined: July 30th, 2013, 9:05 am

Re: [SOLVED] CSS customization for tab width now leaves gaps

Post by Wiggam72 »

I tried this. I changed the maximum size. The one thing I want to change and don't know how is that once the tabs fill up the screen, it no longer automatically goes to the link that's clicked on. The clicked link stays off the screen and I have to manually navigate to it by putting the cursor on the arrow which is a pain in the rear especially when there are multiple tabs open off the screen.

BTW, in case it matters, I use the extension Open Link in New Tab. https://addons.mozilla.org/en-US/firefo ... n-new-tab/

If I need to post my full script in case something in a prior script is conflicting, please let me know.
Post Reply