Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

Learn More

how to stop bars from moving when moving tabs?

  • 6 réponses
  • 1 a ce problème
  • 68 vues
  • Dernière réponse par 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.

Modifié le par cor-el

Solution choisie

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;
}
Lire cette réponse dans son contexte 👍 1

Toutes les réponses (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.

Modifié le par 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

Solution choisie

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.