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

Support Forum

how to stop bars from moving when moving tabs?

Posted

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.

Modified by cor-el

Chosen solution

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;
}
Read this answer in context 1

Additional System Details

Installed Plug-ins

  • Shockwave Flash 28.0 r0

Application

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

More Information

cor-el
  • Top 10 Contributor
  • Moderator
16390 solutions 147861 answers

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

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

Question owner

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.

''cor-el [[#answer-1062347|said]]'' <blockquote> Try to add this rule to see if that makes a difference. <pre><nowiki>:root { --tab-toolbar-navbar-overlap: 0px !important; } </nowiki></pre> </blockquote> Thanks for the reply, I tried that but it didn't change anything/work.

Modified by qwerty123z

WestEnd
  • Top 10 Contributor
51 solutions 2438 answers

Screen of the error?

Screen of the error?

Question owner

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.

''WestEnd [[#answer-1062412|said]]'' <blockquote> Screen of the error? </blockquote> 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.
jscher2000
  • Top 10 Contributor
7435 solutions 60683 answers

Chosen Solution

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;
}
Wow, I never noticed that before. This is caused by the following built-in style rules: <pre>/* 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; } </pre> To override those, try: <pre>/* 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; } </pre>

Question owner

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.

''jscher2000 [[#answer-1062441|said]]'' <blockquote> Wow, I never noticed that before. This is caused by the following built-in style rules: <pre>/* 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; } </pre> To override those, try: <pre>/* 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; } </pre> </blockquote> Thank you, this solved it.