Bootstrap-Zusammenbruch innerhalb der Tabelle zwischen den Zeilen der Tabelle funktioniert nicht
Ich habe eine Frage bezüglich der Bootstrap collapse-Funktion. Ich bin mir ziemlich sicher, dass ich etwas Blick ziemlich offensichtlich oder leicht zu beheben, aber ich es gegoogelt und viel gespielt mit dem code, aber ohne Erfolg.
Habe ich eine "account-Einstellungen" - Seite, wo alle account-Informationen von einem Benutzer in einer Tabelle angezeigt-wie format, mit der Tabelle, die Zellen der letzten Spalte der Tabelle immer mit einem "Bearbeiten"-button zu Bearbeiten, dass die Informationen. Wenn die Menschen klicken Sie auf "Bearbeiten", wird ein Bearbeiten-Formular wird erweitern genau unter dieser Zeile in der Tabelle.
Ich folgte dem Schema in http://twitter.github.com/bootstrap/javascript.html#collapse , der Zusammenbruch Funktion selbst funktioniert gut, aber das problem ist, dass jede form immer vergrößert über meinem Tisch, unabhängig davon, welche Bearbeiten-button, den ich klicken Sie auf. Ich habe einen screenshot gemacht, wie es aussieht. http://imageshack.us/photo/my-images/834/problemyn.png/ , Anstatt über die ganze Tabelle, ich will Sie nur unter bestimmten Zeile, drücken Sie die unteren Zeilen nach unten.
Hier mein code:
<table class="table">
<tbody>
<tr>
<td>Username</td>
<td><%= @user.name %></td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#username">Edit</button></td>
</tr>
<div id="username" class="collapse">
<div class="row">
<div class="span6 offset3">
<%= form_for(@user) do |form| %>
<%= render 'shared/error_messages', object: form.object %>
<%= form.label :name, "Change Username" %>
<%= form.text_field :name %>
<%= form.submit "Save changes", class: "btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<tr>
<td>Email</td>
<td><%= @user.email %></td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#email">Edit</button></td>
</tr>
<div id="email" class="collapse">
<div class="row">
<div class="span6 offset3">
<%= form_for(@user) do |form| %>
<%= render 'shared/error_messages', object: form.object %>
<%= form.label :email, "Change Email" %>
<%= form.text_field :email %>
<%= form.submit "Save changes", class: "btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<tr>
<td>Password</td>
<td>Last time updated: <%= @user.updated_at %></td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#password">Edit</button></td>
</tr>
<div id="password" class="collapse">
<div class="row">
<div class="span6 offset3">
<%= form_for(@user) do |form| %>
<%= render 'shared/error_messages', object: form.object %>
<%= form.label :password, "Change Password" %>
<%= form.text_field :password %>
<%= form.label :password_confirmation, "Confirm Password" %>
<%= form.password_field :password_confirmation %>
<%= form.submit "Save changes", class: "btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<tr>
<td>Language</td>
<td>English</td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#language">Edit</button></td>
</tr>
<div id="language" class="collapse">
<div class="row">
<div class="span6 offset3">
<!-- code for language form -->
</div>
</div>
</div>
<tr>
<td>Avatar</td>
<td><%= avatar_status %></td>
<td><button class="btn btn-danger" data-toggle="collapse" data-target="#demo">Edit</button></td>
</tr>
<div id="demo" class="collapse">
<div class="row">
<div class="span6 offset3">
<%= form_for(@user) do |form| %>
<%= form.label :avatar %>
<%= form.file_field :avatar %>
<%= form.submit "Add avatar", class: "btn btn-primary" %>
<% end %>
</div>
</div>
</div>
</tbody>
</table>
InformationsquelleAutor rails_has_elegance | 2012-05-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hallo, ich bin traurig, dass ich nicht eine befriedigende Antwort. Es ist nicht erlaubt, etwas anderes als
<tr>
Elemente als Nachkommen<tbody>
also dein HTML-Code ist nicht gültig. Dies ist, was bewirkt, dass die verstörenden Verhalten. Ihre beste Wette ist, um wickeln Sie jeden Teil von Ihr Formular in eine neuetable
element.InformationsquelleAutor Tinco
Ausblenden einer Zeile in der Tabelle, sollten Sie schreiben extra css für den reduzierten Zeile:
Wird es fix das Problem bei der Anzeige nach der Zeile erweitert.
InformationsquelleAutor Qier LU