Domino 9 und frühere Versionen > ND9: Entwicklung

Log-In Form responsiv machen

(1/2) > >>

theBastian:
Hallo allerseits,

ich versuche gerade die Standard Log-In Form responsiv zu machen (Anmeldung am iPhone) und wollte dabei nicht irgendwas mit Ajax oder so bauen sondern die Vorgaben nehmen.

Beim Suchen bin ich darauf gestoßen: http://xpagesbeast.com/uxdesign/customizing-the-html-log-in-form-with-bootstrap/

Das ist eigentlich genau das, was ich will. Einfache kleine Änderung, die an der Funktion nichts ändert aber schöner aussieht --- dachte ich mir. ;)

Leider funktioniert die Sache nicht so wie gedacht. Ich habe alles genau so umgesetzt, die eingebundenen css-Libs werden gefunden, keine Fehler in der Konsole beim Aufruf aber leider werden die css-Eigenschaften nicht genutzt, sprich meine Eingabemaske sieht nicht so aus, wie sie mit Bootstrap aussehen sollte.

Weiß jemand, wo ich noch schauen könnte, warum das so ist?

Btw.ich habe hier mit Absicht nicht alle möglichen Informationen reinkopiert, da ich nicht weiß, was wichtig ist und was nicht (Web/css-Anfänger). Sagt bitte einfach, was ich zeigen soll.

FG
Sebastian

HH:
Poste mal das Durchgangs-HTML aus der Maske und den Inhalt von HTML Head Content.

Gruß
Hubert

theBastian:
Ich habe es mir ja einfach gemacht und von der Seite, die oben verlinkt ist kopiert.

Durchgangs-HTML

--- Code: ---<!-- $$HTMLFrontMatter hidden field up here to set DOCTYPE -->

</form>
    <div class="container">
      <form action="/names.nsf?Login" method="post">
        <h2>Please sign in.</h2>
        <input type="text" name="username" placeholder="Email address" autofocus>
        <input type="password" name="password" placeholder="Password">        
        <button type="submit">Sign in</button>
<!--- Notes Hidden fields go here -->

Hidden: 
RedirectTo html attribute type="hidden" but not hidden from the browser
$PublicAccess, ReasonType, $$HTMLTagAttributes
      </form>
    </div> <!-- /container -->
--- Ende Code ---

HTML Head Content

--- Code: ---"    <meta charset=\"utf-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <meta name=\"description\" content=\"\">
    <meta name=\"author\" content=\"\">
    <link rel=\"shortcut icon\" href=\"/" + @WebDbName + "/favicon.ico\">

    <title>Sign in</title>

    <!-- Bootstrap core CSS -->
       <link href=\"/" + @WebDbName + "/bootstrap/css/bootstrap-signin.css\" rel=\"stylesheet\">

    <!-- Custom styles for this template -->
    <link href=\"/" + @WebDbName + "/bootstrap/css/signin.css\" rel=\"stylesheet\">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src=\"http://getbootstrap.com/assets/js/html5shiv.js\"></script>
      <script src=\"http://getbootstrap.com/assets/js/respond.min.js\"></script>
    <![endif]-->"
--- Ende Code ---

HH:
Und die entsprechenden css Dateien sind auch im Web-Content-Folder vorhanden und es gibt keine Fehlermeldung im Netzwerk-Tab des Browsers?

Ich frage nach, weil du geschrieben hast "keine Fehler in der Konsole".

Gruß
Hubert

theBastian:
Genau, Bootstrap und die css-Dateien sind im Web-Content-Folder und werden gefunden.

Keine Fehlermeldung in der Konsole.

Testweise habe ich eine css-Datei mal umbenannt, prompt ein Fehler in der Konsole - css nicht gefunden. Daher bin ich der Meinung, die css werden gefunden.

Navigation

[0] Themen-Index

[#] Nächste Seite