how to stop bars from moving when moving tabs?
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.
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
All Replies (6)
Try to add this rule to see if that makes a difference.
:root {
--tab-toolbar-navbar-overlap: 0px !important;
}
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.
Modified by qwerty123z
Screen of the error?
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.
Seçilmiş Həll
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;
}
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.