Currently, I am working on implementing Jinja code in my Flask application. I have a
<table class="table table-hover">
<thead>
<th scope="col" class="text-primary">Name</th>
<th scope="col" class="text-primary">Description</th>
</thead>
<tbody class="text-secondary">
{% for item in char.inventory %}
<tr id="{{item.itemid}}_row">
<div>
<td id="{{item.itemid}}_name">{{item.name}}</td>
</div>
<div>
<td id="{{item.itemid}}_description">{{item.description}}</td>
</div>
<td class="text-right"><button id="{{item.itemid}}" class="btn btn-outline-info" onclick="itemeditor(this)">edit</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
This loop generates a table that is styled with Bootstrap framework. By clicking the button, JQuery code is triggered to change table entries into text inputs with corresponding values.
function itemeditor(elem) {
self = $(elem);
itemid = self.attr("id");
itemnamenode = $("#" + itemid + "_name")
itemdescriptionnode = $("#" + itemid + "_description")
itemnamefield = $('<input type="text" style="display : inline;" size="50" class="form-control" />')
itemnamefield.val(itemnamenode.text())
itemdescfield = $(('<input type="text" style="display : inline;" size="50" class="form-control" />'))
itemdescfield.val(itemdescriptionnode.text())
itemnamenode.replaceWith(itemnamefield)
itemdescriptionnode.replaceWith(itemdescfield)
}
The issue arises when the text inputs created by JQuery expand to full width and stack vertically instead of aligning horizontally like the original table entries.
Table state before button click
Table state after button click
Is there a way to adjust the Bootstrap/CSS settings so that the text inputs stay aligned within the table structure? Thank you for any assistance provided.