web-dev-qa-db-fra.com

Excès d’espace au-dessus de la barre d’administrateur dans Frontend avec Twitter Bootstrap

Le problème (excès d’espace blanc au-dessus de la barre d’administrateur dans Frontend avec Twitter Bootstrap):

Lorsque vous êtes connecté et que vous visualisez l’interface - Si vous réduisez votre navigateur, un espace blanc en excès apparaît au-dessus de la barre d’administrateur. J'ai remarqué que tout va bien en plein écran et même en taille de tablette. Toutefois, lorsque vous êtes sur le point de réduire votre taille à environ 600 pixels, l’espace blanc apparaît AU-DESSUS de la barre d’administrateur. J'ai testé sur mon téléphone et l'espace blanc est également présent sur mon téléphone.

La question:

Est-ce un problème en conflit avec WordPress ou dois-je faire quelque chose avec ma configuration de Twitter Bootstrap?

Tout conseil sur la suppression de cet espace blanc en excès au-dessus de la barre d'administration lors de l'affichage de l'interface (à l'aide de Twitter Bootstrap - Responsive) sur un appareil mobile serait grandement apprécié.

theme-developmentfront-endadmin-barresponsivetwitter-bootstrap
2
Michael Ecklund

Je viens juste de rencontrer ce problème aussi, la raison en est qu’avec une largeur de 600 pixels, la barre d’administration passe de position: fixée à position: absolute;

Une fois fixé, il est verrouillé en haut de l'écran (top: 0)

En mode Absolue, il est verrouillé en haut du conteneur le plus proche qui le contient. Il s’agit de l’élément html par défaut, mais si un parent est défini comme ayant une position (dans notre corps de cas a une définition de position), il contiendra tous ses enfants et ses règles de position seront basées sur sa position. L'élément html ayant une marge supérieure de 46 pixels, il abaisse le corps de 46 pixels. Donc, puisque le corps est abaissé de 46 pixels, le mieux que notre barre d’administration puisse atteindre est le haut de notre corps et non le haut de la page.

Si vous avez besoin d'une position: relative sur le corps, vous pouvez faire plusieurs choses pour résoudre ce problème. Vous pouvez ajouter l'une de ces règles à votre fichier CSS de thèmes et le remplacer par défaut par le format wordpress css.

  1. Vous pouvez remplacer la règle absolue de position de la barre d'administrateur et la réinitialiser. Cela fera défiler la barre d'administration avec la page afin que vous la voyiez toujours en haut, peu importe où vous vous trouvez sur la page.

    html #wpadminbar{position:fixed};

  2. Vous pouvez modifier la position de la barre d'administration pour avoir un sommet de -46 pixels dans les résolutions inférieures à 600 pixels; Cela permet de maintenir la barre en haut de la page sur de petits écrans afin d'éviter qu'elle ne prenne de la valeur à l'écran lorsque vous faites défiler l'écran.

    @media screen and (max-width:600px){html #wpadminbar{top:-46px}}

10
Jacob Swain

C'était quelque chose de simple. J'avais position: relative; défini pour la body.

Exemple: 

body {
    position: relative;
}

Je ne sais pas POURQUOI cela aurait un effet, mais l'élimination de position: relative; pour la balise <body> a permis de régler cet espace blanc en excès au-dessus de la barre d'administration sur le serveur alors que la taille du navigateur était <600px.

0
Michael Ecklund