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:&nbsp;<%= @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>
Das Bild ist jetzt ein Toter link macht die Frage weniger klar.

InformationsquelleAutor rails_has_elegance | 2012-05-17

Schreibe einen Kommentar