web-dev-qa-db-fra.com

alerte de démarrage dans un div flottant fixe en haut de la page

J'ai une application Web qui utilise bootstrap (2.3.2 - stratégie d'entreprise, nous ne pouvons pas passer à la version 3.0 sans effectuer de nombreux tests sur plusieurs applications Web). Plusieurs applications de cette application nécessitent la validation des formulaires et des tableaux. Toutefois, pour des raisons pratiques et esthétiques, un message d’alerte doit apparaître sous la forme d’un div flottant en haut de la page.

Ce sera un div flottant fixe, qui peut être affiché et caché à l’aide de javascript selon les besoins. Cette partie fonctionne et je peux contrôler cette div chaque fois que je dois envoyer des informations à l'utilisateur ou qu'une erreur se produit.

La mise en page est comme ça:

<div id="message">
    <div id="inner-message" class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        test error message
    </div>
</div>

Le style est ci-dessous:

#message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#inner-message {
    margin: 0 auto;
}

La div #message se comporte très bien, mais quand j'essaie d'ajouter un peu de remplissage à la div #message (pour essayer d'obtenir un peu d'espace entre le bord de la page et la div ie padding: 5px), la div ne reçoit que du remplissage à gauche et en haut et le reste de la div est poussé trop loin à droite de la page (masquant une partie du «x» à l'intérieur de l'alerte bootstrap).

Quelqu'un at-il déjà vécu cela? Cela semble être un problème assez simple, puis-je oublier quelque chose?

javascripthtmlcsstwitter-bootstrap
34
Husman

Enroulez simplement votre message intérieur dans une div sur laquelle vous appliquez votre remplissage: http://jsfiddle.net/Ez9C4/

<div id="message">
    <div style="padding: 5px;">
        <div id="inner-message" class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            test error message
        </div>
    </div>
</div>
31
dpellier

Si vous souhaitez une alerte fixée au sommet et que vous utilisez bootstrap navbar -barbar-fixed-top, la classe de style suivante superposera l'alerte au-dessus du navigateur:

.alert-fixed {
    position:fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%;
    z-index:9999; 
    border-radius:0px
}

Cela a bien fonctionné pour moi de fournir des alertes même lorsque l'utilisateur fait défiler la page.

41
Derek

Je pense que le problème est que vous devez envelopper votre div dans un conteneur et/ou une ligne. 

Cela devrait donner un aspect similaire à ce que vous recherchez: 

<div class="container">
    <div class="row" id="error-container">
         <div class="span12">  
             <div class="alert alert-error">
                <button type="button" class="close" data-dismiss="alert">×</button>
                 test error message
             </div>
         </div>
    </div>
</div>

CSS:

#error-container {
     margin-top:10px;
     position: fixed;
}

Démo Bootply

5
Dan

D'autres suggèrent un wrapping div mais vous devriez pouvoir le faire sans ajouter de complexité à votre code HTML ...

regarde ça:

#message {
  box-sizing: border-box;
  padding: 8px;
}
3
thykka

Vous pouvez utiliser cette classe: class="sticky-top alert alert-dismissible" 

2
ibrahim konuk

La méthode la plus simple consiste à utiliser l’un des utilitaires de classe fournis par Bootstrap:

<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>

https://getbootstrap.com/docs/4.0/utilities/position

0
tfmontague