Ich habe zu meiner Web-Frontend Page ein paar Fragen und hoffe hier kann mir jemand weiterhelfen
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?
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">×</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>
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?
Kommentar