Table inside a form and inside a modal in Twitter Bootstrap does not render correctly, no uppercase letters
I have a situation here and maybe the solution is simple, but so far I can't find a way out, so I need help.
I have this HTML code:
<div class="modal fade in" id="selectFabricante" tabindex="-1" role="dialog" aria-labelledby="selectFabricante" aria-hidden="false" data-backdrop="static" style="display: block; padding-right: 17px;"><div class="modal-backdrop fade in" style="height: 611px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
<h4 class="modal-title">Seleccione uno o más fabricantes</h4>
</div>
<div class="modal-body">
<form id="fabForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="toggleChkSelFabricante" name="toggleChkSelFabricante"></th>
<th>Fabricante</th>
</tr>
</thead>
<tbody id="selFabricanteBody"><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr></tbody>
</table>
</div>
</div>
<div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Regresar</button>
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Agregar</button>
</div>
</form>
</div>
</div>
</div>
</div>
Which rendering does the image below display:
What could be wrong with this markup? I am using the latest Twitter Bootstrap. Any help? Advice?
Some clarifications:
- I need a table inside a form because I consider its tabular data and semantic data to be the right choice.
- I need a form because I am using BootstrapValidator and as the docs say here that the markup is correct and I need to check at least one checkbox before activating the submit button and allowing the form to submit
+3
source to share
1 answer