2017-01-14 3 views
-1

Ich mache eine Chrome-Erweiterung. Dies hat ein Login-Feld und eine Fehlermeldung kann angezeigt werden, wenn ungültige Zugangsdaten eingegeben wurden. Nachdem die Fehlermeldung nicht mehr angezeigt wird, wird die Größe des Fensters nicht auf das Original zurückgesetzt.Chrome-Extension passt nicht auf Originalgröße an

Vor der Fehlermeldung:

Before login

Die Fehlermeldung:

Error message

Nach der Fehlermeldung:

After error message

Wie stelle ich sicher, dass das Fenster auf die ursprüngliche Höhe zurückgesetzt wird, nachdem die Nachricht verschwunden ist?

<body> 
    <div class="ui middle aligned center aligned grid"> 
     <div class="column"> 
      <div id="authView"> 
       <h2 class="ui teal header"> 
       <div class="content" style="margin-top:0.5em;">Log in</div> 
       </h2> 
       <form class="ui large form" id="login-form"> 
        <div class="ui segment"> 
         <div id="login-error" class="ui hidden negative message"> 
          <p>Invalid username or password. Please try again</p> 
         </div> 
         <div class="field"> 
          <div class="ui left icon input"> 
           <i class="user icon"></i> 
           <input id="username" type="text" name="username" placeholder="Username" autofocus /> 
          </div> 
         </div> 
         <div class="field"> 
          <div class="ui left icon input"> 
           <i class="lock icon"></i> 
           <input id="password" type="password" name="password" placeholder="Password"> 
          </div> 
         </div> 
         <input class="ui fluid large teal submit button" type="submit" value="Login"> 
        </div> 
       </form> 
      </div> 
      <div id="mainView" style="display:none;"> 
       <h2 class="ui teal header" style="margin-top:0.5em;"> 
        <div class="content">Listening for calls...</div> 
       </h2> 
       <form class="ui large form" id="call-form"> 
        <div class="ui segment"> 
         <div class="field"> 
          <div class="ui left icon input" id="callDiv"> 
           <i class"icon call"></i> 
           <input type="text" id="destNumber" placeholder="Number to call" autofocus /> 
          </div> 
         </div> 
         <input class="ui fluid large teal submit button" value="Call" type="submit"> 
        </div> 
       </form> 
       <div> 
        <button class="ui negative button" id="sign-out"> 
         <i class="icon sign out"></i> 
         Sign out 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

Die Fehlermeldung wird eine einfache Funktion gezeigt werden:

ich btw Semantic-UI bin mit nicht sicher, ob das einen Unterschied macht.

+0

Bitte bearbeiten Sie die Frage zum Thema: Fügen Sie ein ** complete ** [mcve] ein, das * das Problem dupliziert *. Einschließlich * manifest.json *, einige der Hintergrund/Inhalt/Popup-Skripte/HTML. Fragen, die Debugging-Hilfe suchen ("** warum funktioniert dieser Code nicht? **") müssen Folgendes enthalten: ► das gewünschte Verhalten, ► ein bestimmtes Problem oder einen Fehler * und * ►den kürzesten Code, der für die Wiedergabe in der Frage erforderlich ist selbst**. Fragen ohne eine klare Problemstellung sind für andere Leser nicht nützlich. Siehe: "** Wie erstelle ich ein [mcve] **", [Was kann ich hier fragen?] (Http://stackoverflow.com/help/on-topic) und [ask]. – Makyen

+0

Der Grund, warum [mcve] benötigt wird, ist, dass * wir helfen wollen *. Es ist ** viel einfacher zu helfen, wenn wir nicht den Code neu erstellen müssen, der benötigt wird, um das Problem zu duplizieren. Dies ist Code, den Sie bereits haben. Also, bitte helfen Sie uns, Ihnen zu helfen und bieten Sie eine * komplette * [mcve], die das Problem dupliziert. Ohne einen [mcve] ist der Aufwand, der erforderlich ist, um Ihnen zu helfen, ** viel höher, was die Anzahl der Menschen, die Ihnen helfen wollen, erheblich reduziert. Selbst wenn wir den zusätzlichen Aufwand aufbringen, müssen wir ** auf signifikante Teile dessen, was Ihr Problem sein könnte, ** raten. – Makyen

Antwort

0

Wenn Sie dies noch nicht getan haben - versuchen Sie explizit, die Höhe für das Element anzugeben, das nicht zurück skaliert wird.

Ich weiß, dass ich auf Probleme gestoßen bin, wo, wenn ich das nicht explizit sage, die Höhe sich selbst definiert, wenn ein Ereignis eintritt (auch wenn es keinen Inline-Stil gibt) und ich Probleme habe.

+0

Die Sache, die nicht auf den Ursprung zurück zu skalieren scheint, ist der Körper. Wenn Sie dies jedoch auf "height: auto;" einstellen, wird es noch mehr durcheinandergebracht und zeigt eine lange gestreckte Ansicht. – Randyr

+0

Zeigt es schon am Anfang falsch an - vor dem Fehler? Oder nach dem Fehler? Wenn es nur auf den ersten Blick ist, dann hilft vielleicht ein Blick auf den Code bei der Fehlersuche. Wenn es nur nach den Fehlern ist, dann bin ich zu der Überzeugung gelangt, dass, egal in welchem ​​Container oder Div die Fehler ankommen, eine Art Höhe an sie gebunden ist, die bleibt und den Rest des Körpers mit sich zieht. –

+0

Hinzugefügt die html/js – Randyr

Verwandte Themen