Positionierung ein Warnfeld in einem Textfeld

ich eine Warnung in einem Textfeld mit dem folgenden Code positionierte:Positionierung ein Warnfeld in einem Textfeld

CSS:

#alertBox { 
    width: 30%; 
    height: 12%; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding: 40px; 
    background-color: #0075bf; 
    color: white; 
    text-align: center; 
    font-size: 20px; 
} 
#template { 
    font-family: Lato Regular; 
    width: 70%; 
    margin: auto; 
    margin-top: 10%; 
} 
/* Medium,Small and Extra Small Devices */ 

@media (max-width: 992px) { 
    #alertBox { 
     width: 100%; 
     margin-left: 3%; 
     margin-right: 10%; 
    } 

    #template { 
     width: 100%; 
     margin-top: 5%; 
    } 
}

HTML:

<div class="container"> 
    <article id="template"> 
    <form role="form"> 
     <fieldset class="form-group"> 
      <h5 for="myOffer">Mon offre</h5> 
      <div id="alertBox" class="alert alert-info"> 
       <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> Merci de compléter votre offre avant de cliquer sur envoyer 
      </div> 
      <textarea class="form-control" rows=" 13 " id="myOffer "></textarea> 
     </fieldset> 
    </form> 
    </article> 
    </div>

Allerdings, wenn ich die Größe Das Formular, die Alertbox positioniert sich nicht richtig innerhalb des Textfelds.

Hier ist, wie die endgültigen Ergebnisse aussehen sollte:

bitte irgendwelche Vorschläge?

Quelle

2016-03-31 Veela

was willst du. Lass es klar wissen und entferne 'width: 100%' von 'media query', dann wird' margin' in 'text area' funktionieren, weil du' width: 100 %' gibst, deshalb ist margin nutzlos. –

Wenn ich die Größe des Formulars (<992px) ändere, möchte ich, dass das Dialogfeld die volle Breite des Textfelds annimmt, wie in dem Bild, das ich hinzugefügt habe. Entfernen 'Breite: 100%' hilft auch nicht. Das Dialogfeld wird über dem Textfeld für kleinere Bildschirmgröße angezeigt. – Veela

so ist es einfach geben Sie "Position: relativ" zu 'Form-Gruppe' Klasse und entfernen Sie' Rand' von 'Media-Abfrage' verwenden Sie nur' width: 100% ' –

richtiger Weg, dies zu tun ist, fieldset Breite und Position wie folgt zu setzen und zu textarea Breite 100%:

fieldset { 
    position:relative; 
    width: 600px; //for example 
} 
textarea { 
    width:100%; 
}

Dann wird Ihre arelt Box <fieldset> zu Elemente absolut sein. Und wenn Sie in einem Moment die Fenstergröße ändern, wird fieldset zum Beispiel 100% sein und Ihre Alarmbox wird in der Mitte sein.

Quelle

2016-03-31 06:03:09 lomboboo

Danke. Ich vermisste die "Position: relativ". – Veela

Positionierung ein Warnfeld in einem Textfeld

Antwort

Verwandte Themen