Ankündigung

Einklappen
Keine Ankündigung bisher.

Fragen (CSS, Bootstrap Modal & Co) zu einer Seite

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fragen (CSS, Bootstrap Modal & Co) zu einer Seite

    Ich habe zu meiner Web-Frontend Page ein paar Fragen und hoffe hier kann mir jemand weiterhelfen

    HTML-Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="ISO-8859-1" />
    
            <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
            <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />
            <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
    
            <style>
                td {
                    vertical-align: baseline;
                };
            </style>
    
            <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
            <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
            <script type='text/javascript'>
                $(window).load(function(){
                    $(function () {
    
                        $("#addRow").click(function () {
                            var row = $(
                                "<tr> "+
                                "    <td> "+
                                "        <button title="" type='button' "+
                                "            class="btn btn-danger remove show_tip" "+
                                "            data-original-title="Remove from list"> "+
                                "            <i class="fa fa-trash-o"></i> "+
                                "        </button> "+                    
                                "    </td> "+
                                "    <td><input type="text" name="name" style="width: 100%" /></td> "+
                                "    <td> "+
                                "        <select> "+
                                  "            <option value="color">String</option> "+
                                  "            <option value="color" selected="selected">Integer</option> "+
                                  "            <option value="color">Color</option> "+
                                  "            <option value="date">Date</option> "+
                                  "            <option value="datetime-local">Datetime (local)</option>"+
                                  "            <option value="email">Email</option> "+
                                  "            <option value="month">Month</option> "+
                                  "            <option value="file">File</option> "+
                                  "            <option value="number">Number</option> "+
                                  "            <option value="range">Range</option> "+
                                  "            <option value="search">Search</option> "+
                                  "            <option value="tel">Telephon</option> "+
                                  "            <option value="time">Time</option> "+
                                  "            <option value="url">URL</option> "+
                                  "            <option value="week">Week</option> "+
                                  "            <option value="password">Password</option> "+
                                "        </select> "+
                                "    </td> "+
                                "    <td><input type="number" name="length" value="11"  style="align: right; width: 75px"/></td> "+
                                "    <td style="text-align:center"><input type="checkbox" name="nullable" value="1" /></td> "+
                                "    <td style="text-align:center"><input type="checkbox" name="index" value="1" /></td> "+
                                "    <td style="text-align:center"><input type="checkbox" name="unique" value="1" /></td> "+
                                "</tr>");
    
                                 $("#datatable > tbody").append(row);
                        });
    
                        $("table#datatable").on("click", ".remove", function () {
                            $(this).closest('tr').remove();
                        });
    
                    });
                });
            </script>
        </head>
    
        <body>
            <table id="datatable" class="table">
                <thead class="black white-text">
                    <tr>
                        <th>Actions</th>
                        <th style="text-align:center; width: 100%">Name</th>
                        <th>Type</th>
                        <th>Length</th>
                        <th style="text-align:center; width: 15%">Nullable</th>
                        <th style="text-align:center; width: 15%">Index</th>
                        <th style="text-align:center; width: 15%">Unique</th>
                    </tr>
                </thead>
    
                <tbody>
                    <tr>
                        <td>
                            <button title="" type="button"
                                class="btn btn-danger remove show_tip"
                                data-original-title="Remove from list">
                                <i class="fa fa-trash-o"></i>
                            </button>                    
                        </td>
                        <td><input type="text" name="name" value="id"  style="width: 100%" /></td>
                        <td>
                            <select>
                                  <option value="string">String</option>
                                  <option value="integer" selected="selected">Integer</option>
    
                                  <option value="color">Color</option>
                                  <option value="date">Date</option>
                                  <option value="datetime-local">Datetime (local)</option>
                                  <option value="email">Email</option>
                                  <option value="month">Month</option>
                                  <option value="file">File</option>
                                  <option value="number">Number</option>
                                  <option value="range">Range</option>
                                  <option value="search">Search</option>
                                  <option value="tel">Telephon</option>
                                  <option value="time">Time</option>
                                  <option value="url">URL</option>
                                  <option value="week">Week</option>
                                  <option value="password">Password</option>
                            </select>
                        </td>
                        <td><input type="number" name="length" value="11"  style="align: right; width: 75px"/></td>
                        <td style="text-align:center"><input type="checkbox" name="nullable" value="1" /></td>
                        <td style="text-align:center"><input type="checkbox" name="index" value="1" /></td>
                        <td style="text-align:center"><input type="checkbox" name="unique" value="1" /></td>
                    </tr>
                </tbody>
    
                <tfoot>
                    <tr>
                        <td rowspan="7"><button type="button" id="addField" class="btn tn-info btn-lg" data-toggle="modal" data-target="#fieldModal" style="width: 100%">Hinzufügen</button><td>
                    </tr>
                </tfoot>
            </table>    
    
            <div id="fieldModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
    
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
    
                </div>
            </div>                    
        </body>
    </html>
    Die Seite ist noch nicht ganz fertig, so habe ich z.B. die ID vom "Hinzufüge"-Button geändert um es um das Bootstrap Modal zu erweitern.

    Fragen:

    1. Die Select-Box "Type" sollte eigentlich die gleich größe wie die Eingabefelder haben, sie wird allerdings verkleinert dargestellt. Was kann ich tun um die Bootstrap Select-Box auf die Größe der andern Eingabefelder zu bekommen?
    2. Ich habe oben für <td> angegeben, dass sie alle an der Baseline zentriert sein, so das sie alle auf der gleichen vertikal zentriert sein soll. Aber aus irgendeinem grund funkinierts nicht. Wie bekomme ich es hin?
    3. Beim öffnen des Modals soll der Hintergrund ausgegraut und gesperrt werden. Ich habe bis jetzt noch nichts gefunden wie man Bootstrap Modals dazu bekommen kann. Wie bekomme ich es hin?


  • #2
    1. Kein einziges Deiner Formular-Elemente hat die Bootstrap-Klasse form-control zugewiesen. Wenn du bei allen class="form-control" einfügst erhalten sie die grösse des darüberligenden Elements. Wenn du willst, dass alle exakt gleich gross sind musst du das manuell machen.
    2. Keine Ahnung, möglich, dass bootstrap das überschreibt. Schau in die Developer-Tools und guck Dir das an, was da für Attribute bei Deinen <td>-Tags ankommen.
    3. Als "ausgrauen" tut bootstrap, zumindest bei mir. Wenn Dir das nicht grau genug ist kannst du das sicher per css anpassen. Bzgl. Klick, das müsstest du wahrscheinlich selbst programmieren. Alle Klicks abfangen und nur denjenigen auf den Close-Button (und natürlich alles innerhalb des Modals) beachten. Ich kann mir aber schon vorstellen, dass das schon mal jemand gemacht hat, google konnte da nicht weiterhelfen?

    Kommentar


    • #3
      Zitat von jonas3344 Beitrag anzeigen
      1. Kein einziges Deiner Formular-Elemente hat die Bootstrap-Klasse form-control zugewiesen. Wenn du bei allen class="form-control" einfügst erhalten sie die grösse des darüberligenden Elements. Wenn du willst, dass alle exakt gleich gross sind musst du das manuell machen.
      2. Keine Ahnung, möglich, dass bootstrap das überschreibt. Schau in die Developer-Tools und guck Dir das an, was da für Attribute bei Deinen <td>-Tags ankommen.
      3. Als "ausgrauen" tut bootstrap, zumindest bei mir. Wenn Dir das nicht grau genug ist kannst du das sicher per css anpassen. Bzgl. Klick, das müsstest du wahrscheinlich selbst programmieren. Alle Klicks abfangen und nur denjenigen auf den Close-Button (und natürlich alles innerhalb des Modals) beachten. Ich kann mir aber schon vorstellen, dass das schon mal jemand gemacht hat, google konnte da nicht weiterhelfen?
      Danke für deine Argument.

      Kommentar


      • #4
        Du solltest zuerst die Syntaxfehler beseitigen und Dich nicht auf die Toleranz des Browsers verlassen. Einen HTML5-Validator zu bemühen wäre auch nicht das Schlechteste....

        Kommentar

        Lädt...
        X