Bootstrap forms inside child rows
Bootstrap forms inside child rows
I have a table on my site, showing all registered users. I'd like for my admins to be able to edit these users. I'm using child rows to display a form to do so. The form should be styled via simple bootstrap classes.
This is the code that generates the individual child row:
$.post('inc/manageUserHelper.php', { action:'getUser',uid: + rowid }, function (result) {
user = result;
row.child(user).show();
tr.addClass('shown');
})
And this is a snippet from the function that actually generates the content for the child row:
$ausgabe = "";
$ausgabe .= "<form autocomplete='off' method='post' id='editForm_" . $user['user_id'] . "'>";
$ausgabe .= "<div class='form-group' id='grp_fd'>";
$ausgabe .= "<label for='fd'>Filialdirektion</label>";
$ausgabe .= "<select class='form-control' id='fd' name='fd'>";
$ausgabe .= "<option>" . $user['xyz'] . "</option>";
$ausgabe .= "</select>";
$ausgabe .= "</div>";
$ausgabe .= "<div class='form-group' id='grp_company'>";
$ausgabe .= "<label for='company'>Firma</label>";
$ausgabe .= "<input type='text' class='form-control' id='company' name='company'>";
$ausgabe .= "</div>";
[....]
$ausgabe .= "</form>";
echo $ausgabe;
Unfortunately, the Bootstrap-styles are not applied to the form returned.
The first attached screenshot shows how it currently looks, the seconds screenshot show how it SHOULD look.
Can anyone point me to what I'm doing wrong? Is DataTables somehow overwriting the Bootstrap-classes?