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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

how to stop bars from moving when moving tabs?

  • 6 uphendule
  • 1 inale nkinga
  • 2 views
  • Igcine ukuphendulwa ngu qwerty123z

more options

I am using Firefox 57.0.4

I moved my tabs to the bottom using what's shown below in userChrome:

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
  border-top-width: 0 !important; 
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
  display: none !important;
}

When I try to move one of my tabs the bars above it move up slightly. Is there a way to stop the bars above my tabs from moving when I move one of my tabs?

I couldn't upload images when creating this post, so I uploaded the problem in imgur: https://imgur.com/a/BjOoR

If you notice in the second picture the address bar is overlapping the menu bar.

I am using Firefox 57.0.4 I moved my tabs to the bottom using what's shown below in userChrome: <pre><nowiki>/* Tab bar below Navigation & Bookmarks Toolbars */ #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; box-shadow: none !important; border-top-width: 0 !important; } #PersonalToolbar { /* bookmarks toolbar */ -moz-box-ordinal-group: 2 !important; } #TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; padding-top: 0 !important; } /* Clean up spacing */ .titlebar-placeholder { display: none !important; }</nowiki></pre> When I try to move one of my tabs the bars above it move up slightly. Is there a way to stop the bars above my tabs from moving when I move one of my tabs? I couldn't upload images when creating this post, so I uploaded the problem in imgur: https://imgur.com/a/BjOoR If you notice in the second picture the address bar is overlapping the menu bar.

Okulungisiwe ngu cor-el

Isisombululo esikhethiwe

Wow, I never noticed that before. This is caused by the following built-in style rules:

/* The next 3 rules allow dragging tabs slightly outside of the tabstrip
* to make it easier to drag tabs. */
#TabsToolbar[movingtab] {
  padding-bottom: 15px;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 15px;
  margin-bottom: -15px;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: -15px;
  pointer-events: none;
}

To override those, try:

/* Override vertical shifts when moving a tab */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}
Funda le mpendulo ngokuhambisana nalesi sihloko 👍 1

All Replies (6)

more options

Try to add this rule to see if that makes a difference.

:root {
  --tab-toolbar-navbar-overlap: 0px !important;
}
more options

cor-el said

Try to add this rule to see if that makes a difference.
:root {
  --tab-toolbar-navbar-overlap: 0px !important;
}

Thanks for the reply, I tried that but it didn't change anything/work.

Okulungisiwe ngu qwerty123z

more options

Screen of the error?

more options

WestEnd said

Screen of the error?

I posted it in my imgur link since the picture wasn't uploading on here at the time of my post. I just uploaded the pictures again in this post.

In the pictures if you look at the nav-bar. One of the pictures will appear fine but when I try moving a tab around the nav-bar will move up and overlap a bit of the menu buttons.

more options

Isisombululo Esikhethiwe

Wow, I never noticed that before. This is caused by the following built-in style rules:

/* The next 3 rules allow dragging tabs slightly outside of the tabstrip
* to make it easier to drag tabs. */
#TabsToolbar[movingtab] {
  padding-bottom: 15px;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 15px;
  margin-bottom: -15px;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: -15px;
  pointer-events: none;
}

To override those, try:

/* Override vertical shifts when moving a tab */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}
more options

jscher2000 said

Wow, I never noticed that before. This is caused by the following built-in style rules:
/* The next 3 rules allow dragging tabs slightly outside of the tabstrip
* to make it easier to drag tabs. */
#TabsToolbar[movingtab] {
  padding-bottom: 15px;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 15px;
  margin-bottom: -15px;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: -15px;
  pointer-events: none;
}

To override those, try:

/* Override vertical shifts when moving a tab */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}

Thank you, this solved it.