Skip to content

Fix checkbox table layout #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smithdc1 merged 2 commits into from
Jun 8, 2021
Merged

Fix checkbox table layout #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e20b577
Fix layout of checkbox by adding correct css classes
sjkingo May 4, 2021
1e6c1e0
More tests
smithdc1 Jun 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion crispy_bootstrap5/templates/bootstrap5/field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="{% for offset in bootstrap_checkbox_offsets %}{{ offset|slice:"7:14" }}{{ offset|slice:"4:7" }}{{ offset|slice:"14:16" }} {% endfor %}{{ field_class }}">
{% endif %}
{% endif %}
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if not field|is_checkbox %}mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% else %}form-check{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
{% if field.label and not field|is_checkbox and form_show_labels %}
<label {% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="{% if 'form-horizontal' in form_class %}col-form-label{% else %}form-label{% endif %}{% if label_class %} {{ label_class }}{% endif %}{% if field.field.required %} requiredField{% endif %}">
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
Expand Down Expand Up @@ -45,6 +45,12 @@
{% else %}
{% crispy_field field 'class' 'form-select' %}
{% endif %}
{% elif field|is_checkbox %}
{% if field.errors %}
{% crispy_field field 'class' 'form-check-input is-invalid' %}
{% else %}
{% crispy_field field 'class' 'form-check-input' %}
{% endif %}
{% elif field.errors %}
{% crispy_field field 'class' 'form-control is-invalid' %}
{% else %}
Expand Down
108 changes: 108 additions & 0 deletions test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>


<form method="post">
<div><input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="1"><input
id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0"><input
id="id_form-MIN_NUM_FORMS" name="form-MIN_NUM_FORMS" type="hidden"><input id="id_form-MAX_NUM_FORMS"
name="form-MAX_NUM_FORMS" type="hidden"></div>
<table class="table table-sm table-striped">
<thead>
<tr>
<th class=" col-form-label" for="id_form-0-is_company">company</th>
<th class="col-form-label requiredField" for="id_form-0-email">email<span class="asteriskField">*</span>
</th>
<th class="col-form-label requiredField" for="id_form-0-password1">password<span
class="asteriskField">*</span></th>
<th class="col-form-label requiredField" for="id_form-0-password2">re-enter password<span
class="asteriskField">*</span></th>
<th class="col-form-label requiredField" for="id_form-0-first_name">first name<span
class="asteriskField">*</span></th>
<th class="col-form-label requiredField" for="id_form-0-last_name">last name<span
class="asteriskField">*</span></th>
<th class="col-form-label requiredField" for="id_form-0-datetime_field">date time<span
class="asteriskField">*</span></th>
</tr>
</thead>
<tbody>
<tr class="d-none empty-form">
<div class="mb-3">
<td class="mb-3" id="div_id_form-__prefix__-is_company"><input
class="checkboxinput form-check-input" id="id_form-__prefix__-is_company"
name="form-__prefix__-is_company" type="checkbox"></td>
</div>
<td class="mb-3" id="div_id_form-__prefix__-email"><input
class="form-control inputtext textInput textinput" id="id_form-__prefix__-email" maxlength="30"
name="form-__prefix__-email" type="text"><small class="form-text text-muted"
id="hint_id_form-__prefix__-email">Insert your email</small></td>
<td class="mb-3" id="div_id_form-__prefix__-password1"><input class="form-control textInput textinput"
id="id_form-__prefix__-password1" maxlength="30" name="form-__prefix__-password1"
type="password"></td>
<td class="mb-3" id="div_id_form-__prefix__-password2"><input class="form-control textInput textinput"
id="id_form-__prefix__-password2" maxlength="30" name="form-__prefix__-password2"
type="password"></td>
<td class="mb-3" id="div_id_form-__prefix__-first_name"><input
class="form-control inputtext textInput textinput" id="id_form-__prefix__-first_name"
maxlength="5" name="form-__prefix__-first_name" type="text"></td>
<td class="mb-3" id="div_id_form-__prefix__-last_name"><input
class="form-control inputtext textInput textinput" id="id_form-__prefix__-last_name"
maxlength="5" name="form-__prefix__-last_name" type="text"></td>
<td class="mb-3" id="div_id_form-__prefix__-datetime_field"><input class="dateinput form-control"
id="id_form-__prefix__-datetime_field_0" name="form-__prefix__-datetime_field_0"
type="text"><input class="form-control timeinput" id="id_form-__prefix__-datetime_field_1"
name="form-__prefix__-datetime_field_1" type="text"></td>
</tr>
<div class="alert alert-block alert-danger">
<ul class="m-0">
<li>Passwords dont match</li>
</ul>
</div>
<tr>
<div class="mb-3">
<td class="mb-3" id="div_id_form-0-is_company"><input class="checkboxinput form-check-input"
id="id_form-0-is_company" name="form-0-is_company" type="checkbox"></td>
</div>
<td class="mb-3" id="div_id_form-0-email"><input
class="form-control inputtext is-invalid textInput textinput" id="id_form-0-email"
maxlength="30" name="form-0-email" type="text"><span class="invalid-feedback"
id="error_1_id_form-0-email"><strong>This field is required.</strong></span><small
class="form-text text-muted" id="hint_id_form-0-email">Insert your email</small></td>
<td class="mb-3" id="div_id_form-0-password1"><input class="form-control is-invalid textInput textinput"
id="id_form-0-password1" maxlength="30" name="form-0-password1" type="password"><span
class="invalid-feedback" id="error_1_id_form-0-password1"><strong>This field is
required.</strong></span></td>
<td class="mb-3" id="div_id_form-0-password2"><input class="form-control is-invalid textInput textinput"
id="id_form-0-password2" maxlength="30" name="form-0-password2" type="password"><span
class="invalid-feedback" id="error_1_id_form-0-password2"><strong>This field is
required.</strong></span></td>
<td class="mb-3" id="div_id_form-0-first_name"><input
class="form-control inputtext is-invalid textInput textinput" id="id_form-0-first_name"
maxlength="5" name="form-0-first_name" type="text"><span class="invalid-feedback"
id="error_1_id_form-0-first_name"><strong>This field is required.</strong></span></td>
<td class="mb-3" id="div_id_form-0-last_name"><input
class="form-control inputtext is-invalid textInput textinput" id="id_form-0-last_name"
maxlength="5" name="form-0-last_name" type="text"><span class="invalid-feedback"
id="error_1_id_form-0-last_name"><strong>This field is required.</strong></span></td>
<td class="mb-3" id="div_id_form-0-datetime_field"><input class="dateinput form-control is-invalid"
id="id_form-0-datetime_field_0" name="form-0-datetime_field_0" type="text"><input
class="form-control is-invalid timeinput" id="id_form-0-datetime_field_1"
name="form-0-datetime_field_1" type="text"><span class="invalid-feedback"
id="error_1_id_form-0-datetime_field"><strong>This field is required.</strong></span></td>
</tr>
</tbody>
</table>
</form>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</body>
</html>
2 changes: 1 addition & 1 deletion tests/results/single_checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<form method="post">
<div class="mb-3">
<div id="div_id_single_checkbox" class="form-check">
<div id="div_id_single_checkbox" class="mb-3">
<input
type="checkbox"
name="single_checkbox"
Expand Down
111 changes: 111 additions & 0 deletions tests/results/test_tabular_formset_layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<form method="post">
<div> <input type="hidden" name="form-TOTAL_FORMS" value="3" id="id_form-TOTAL_FORMS"> <input type="hidden"
name="form-INITIAL_FORMS" value="0" id="id_form-INITIAL_FORMS"> <input type="hidden" name="form-MIN_NUM_FORMS"
value="0" id="id_form-MIN_NUM_FORMS"> <input type="hidden" name="form-MAX_NUM_FORMS" value="1000"
id="id_form-MAX_NUM_FORMS"> </div>
<table class="table table-striped table-sm">
<thead>
<tr>
<th for="id_form-0-is_company" class="col-form-label "> company </th>
<th for="id_form-0-email" class="col-form-label requiredField"> email<span class="asteriskField">*</span>
</th>
<th for="id_form-0-password1" class="col-form-label requiredField"> password<span
class="asteriskField">*</span> </th>
<th for="id_form-0-password2" class="col-form-label requiredField"> re-enter password<span
class="asteriskField">*</span> </th>
<th for="id_form-0-first_name" class="col-form-label requiredField"> first name<span
class="asteriskField">*</span> </th>
<th for="id_form-0-last_name" class="col-form-label requiredField"> last name<span
class="asteriskField">*</span> </th>
<th for="id_form-0-datetime_field" class="col-form-label requiredField"> date time<span
class="asteriskField">*</span> </th>
</tr>
</thead>
<tbody>
<tr class="d-none empty-form">
<div class="mb-3">
<td id="div_id_form-__prefix__-is_company" class="mb-3"> <input type="checkbox"
name="form-__prefix__-is_company" class="checkboxinput form-check-input"
id="id_form-__prefix__-is_company"> </td>
</div>
<td id="div_id_form-__prefix__-email" class="mb-3"> <input type="text" name="form-__prefix__-email"
maxlength="30" class="textinput textInput inputtext form-control" id="id_form-__prefix__-email"> <small
id="hint_id_form-__prefix__-email" class="form-text text-muted">Insert your email</small> </td>
<td id="div_id_form-__prefix__-password1" class="mb-3"> <input type="password"
name="form-__prefix__-password1" maxlength="30" class="textinput textInput form-control"
id="id_form-__prefix__-password1"> </td>
<td id="div_id_form-__prefix__-password2" class="mb-3"> <input type="password"
name="form-__prefix__-password2" maxlength="30" class="textinput textInput form-control"
id="id_form-__prefix__-password2"> </td>
<td id="div_id_form-__prefix__-first_name" class="mb-3"> <input type="text" name="form-__prefix__-first_name"
maxlength="5" class="textinput textInput inputtext form-control" id="id_form-__prefix__-first_name"> </td>
<td id="div_id_form-__prefix__-last_name" class="mb-3"> <input type="text" name="form-__prefix__-last_name"
maxlength="5" class="textinput textInput inputtext form-control" id="id_form-__prefix__-last_name"> </td>
<td id="div_id_form-__prefix__-datetime_field" class="mb-3"> <input type="text"
name="form-__prefix__-datetime_field_0" class="dateinput form-control"
id="id_form-__prefix__-datetime_field_0"><input type="text" name="form-__prefix__-datetime_field_1"
class="timeinput form-control" id="id_form-__prefix__-datetime_field_1"> </td>
</tr>
<tr>
<div class="mb-3">
<td id="div_id_form-0-is_company" class="mb-3"> <input type="checkbox" name="form-0-is_company"
class="checkboxinput form-check-input" id="id_form-0-is_company"> </td>
</div>
<td id="div_id_form-0-email" class="mb-3"> <input type="text" name="form-0-email" maxlength="30"
class="textinput textInput inputtext form-control" id="id_form-0-email"> <small id="hint_id_form-0-email"
class="form-text text-muted">Insert your email</small> </td>
<td id="div_id_form-0-password1" class="mb-3"> <input type="password" name="form-0-password1" maxlength="30"
class="textinput textInput form-control" id="id_form-0-password1"> </td>
<td id="div_id_form-0-password2" class="mb-3"> <input type="password" name="form-0-password2" maxlength="30"
class="textinput textInput form-control" id="id_form-0-password2"> </td>
<td id="div_id_form-0-first_name" class="mb-3"> <input type="text" name="form-0-first_name" maxlength="5"
class="textinput textInput inputtext form-control" id="id_form-0-first_name"> </td>
<td id="div_id_form-0-last_name" class="mb-3"> <input type="text" name="form-0-last_name" maxlength="5"
class="textinput textInput inputtext form-control" id="id_form-0-last_name"> </td>
<td id="div_id_form-0-datetime_field" class="mb-3"> <input type="text" name="form-0-datetime_field_0"
class="dateinput form-control" id="id_form-0-datetime_field_0"><input type="text"
name="form-0-datetime_field_1" class="timeinput form-control" id="id_form-0-datetime_field_1"> </td>
</tr>
<tr>
<div class="mb-3">
<td id="div_id_form-1-is_company" class="mb-3"> <input type="checkbox" name="form-1-is_company"
class="checkboxinput form-check-input" id="id_form-1-is_company"> </td>
</div>
<td id="div_id_form-1-email" class="mb-3"> <input type="text" name="form-1-email" maxlength="30"
class="textinput textInput inputtext form-control" id="id_form-1-email"> <small id="hint_id_form-1-email"
class="form-text text-muted">Insert your email</small> </td>
<td id="div_id_form-1-password1" class="mb-3"> <input type="password" name="form-1-password1" maxlength="30"
class="textinput textInput form-control" id="id_form-1-password1"> </td>
<td id="div_id_form-1-password2" class="mb-3"> <input type="password" name="form-1-password2" maxlength="30"
class="textinput textInput form-control" id="id_form-1-password2"> </td>
<td id="div_id_form-1-first_name" class="mb-3"> <input type="text" name="form-1-first_name" maxlength="5"
class="textinput textInput inputtext form-control" id="id_form-1-first_name"> </td>
<td id="div_id_form-1-last_name" class="mb-3"> <input type="text" name="form-1-last_name" maxlength="5"
class="textinput textInput inputtext form-control" id="id_form-1-last_name"> </td>
<td id="div_id_form-1-datetime_field" class="mb-3"> <input type="text" name="form-1-datetime_field_0"
class="dateinput form-control" id="id_form-1-datetime_field_0"><input type="text"
name="form-1-datetime_field_1" class="timeinput form-control" id="id_form-1-datetime_field_1"> </td>
</tr>
<tr>
<div class="mb-3">
<td id="div_id_form-2-is_company" class="mb-3"> <input type="checkbox" name="form-2-is_company"
class="checkboxinput form-check-input" id="id_form-2-is_company"> </td>
</div>
<td id="div_id_form-2-email" class="mb-3"> <input type="text" name="form-2-email" maxlength="30"
class="textinput textInput inputtext form-control" id="id_form-2-email"> <small id="hint_id_form-2-email"
class="form-text text-muted">Insert your email</small> </td>
<td id="div_id_form-2-password1" class="mb-3"> <input type="password" name="form-2-password1" maxlength="30"
class="textinput textInput form-control" id="id_form-2-password1"> </td>
<td id="div_id_form-2-password2" class="mb-3"> <input type="password" name="form-2-password2" maxlength="30"
class="textinput textInput form-control" id="id_form-2-password2"> </td>
<td id="div_id_form-2-first_name" class="mb-3"> <input type="text" name="form-2-first_name" maxlength="5"
class="textinput textInput inputtext form-control" id="id_form-2-first_name"> </td>
<td id="div_id_form-2-last_name" class="mb-3"> <input type="text" name="form-2-last_name" maxlength="5"
class="textinput textInput inputtext form-control" id="id_form-2-last_name"> </td>
<td id="div_id_form-2-datetime_field" class="mb-3"> <input type="text" name="form-2-datetime_field_0"
class="dateinput form-control" id="id_form-2-datetime_field_0"><input type="text"
name="form-2-datetime_field_1" class="timeinput form-control" id="id_form-2-datetime_field_1"> </td>
</tr>
</tbody>
</table>
</form>
Loading
⚡