CSS richtet Komponenten in BootsFaces Zeile vertikal aus

Ich habe ein BootFaces JSF-generiertes Anmeldeformular, aber ich kann nicht scheinen, dass die Bereiche vertikal in der Mitte mit den Eingabefeldern ausgerichtet werden.CSS richtet Komponenten in BootsFaces Zeile vertikal aus

Dies ist, wie das Login-Formular zur Zeit aussieht:

Hier ist der HTML-Code, für diese spezielle Form erzeugt wird:

<html> 
    <head> 
     <link rel="stylesheet" href="bsf.css"/> 
     <link rel="stylesheet" href="core.css"/> 
    </head> 
    <body> 
     <form id="loginForm" name="loginForm" method="post" action="" enctype="application/x-www-form-urlencoded"> 
      <input type="hidden" name="loginForm" value="loginForm" /> 
      <div id="loginForm:j_idt18" class="row"> 
       <div id="loginForm:j_idt19" class="col-md-4"><span class="pull-right">Username:</span></div> 
       <div id="loginForm:j_idt21" class="col-md-4"> 
       <div id="loginForm:username" class="form-group"><input id="input_loginForm:username" name="input_loginForm:username" type="text" class="form-control bf-no-message" placeholder="Username" /></div> 
       </div> 
       <div id="loginForm:j_idt22" class="message col-md-4 "> 
       <div id="loginForm:j_idt23"></div> 
       </div> 
      </div> 
      <div data-toggle="tooltip" data-placement="auto" data-container="body" title="This password has fancy error messages." id="loginForm:j_idt24" class="row"> 
       <div id="loginForm:j_idt25" class="col-md-4"><span class="pull-right">Password:</span></div> 
       <div id="loginForm:j_idt27" class="col-md-4"> 
       <div id="loginForm:password" class="form-group"><input id="input_loginForm:password" name="input_loginForm:password" type="password" class="form-control bf-no-message" placeholder="Password" /></div> 
       </div> 
       <div id="loginForm:j_idt28" class="message col-md-4 "> 
       <div id="loginForm:j_idt29"></div> 
       </div> 
      </div> 
      <div id="loginForm:j_idt30" class="row"> 
       <div id="loginForm:j_idt31" class="col-md-2 col-md-offset-4"><button type="submit" id="loginForm:j_idt32" name="loginForm:j_idt32" style="width:100%" class="btn btn-default" style="width:100%">Login</button></div> 
       <div id="loginForm:j_idt33" class="col-md-2"><button type="submit" id="loginForm:j_idt34" name="loginForm:j_idt34" style="width:100%" class="btn btn-default" style="width:100%">Forgotten password?</button></div> 
      </div> 
      <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:1" value="-5586558823054575095:3125033607536646469" autocomplete="off" /> 
     </form> 
    </body> 
</html>

Und hier sind die zwei CSS-Dateien, die zu BootFaces:

bsf.css

core.css

Quelle

2016-08-17 ChrisM

@BalusC, ja Sie haben Recht, ein MCVE des HTML und CSS wäre hilfreicher. Ich habe die Frage geändert und Links zu den CSS-Dateien eingefügt. – ChrisM

Unter der Annahme, dass die Höhe konsistent bleiben, können Sie vertikal Mitte Text sowohl eine Höhe und line-height festgelegt wird:

.vertical-center { 
    height: 100px; 
    line-height: 100px; 
}

Genau diese Klasse zu den Textfeldern Benutzername und Kennwort gelten. Die Werte sollten die Höhe der Eingabefelder widerspiegeln.

Quelle

2016-08-17 05:45:09

Danke, das funktioniert. Ich hatte gehofft, es könnte einen Weg geben, es zu tun, ohne die Werte hart zu kodieren. Wenn in Kürze keine weiteren Antworten kommen, werde ich das als Antwort akzeptieren – ChrisM

Wahrscheinlich wird der Bug durch die falsche Markierung von BootsFaces 0.9.1 und darunter verursacht. Werfen Sie einen Blick auf das GitHub-Problem, um den Fortschritt zu verfolgen (https://github.com/TheCoder4eu/BootsFaces-OSP/issues/475). –

Freut mich zu hören, dass die Lösung Ihr Problem behoben hat! Überprüfen Sie einfach, ob Sie eine Lösung für das Problem gefunden haben, ohne fest codierte Werte zu verwenden? Wenn nicht, sollten Sie daran denken, diese Antwort als korrekt zu markieren. Einige Benutzer filtern Fragen nach unbeantworteten Fragen. Wenn Sie also eine Antwort auf eine Frage auswählen, können Sie bereits sortierte Probleme herausfiltern. Prost! :) –

CSS richtet Komponenten in BootsFaces Zeile vertikal aus

Antwort

Verwandte Themen