Overflow on collapsing tables and Bootstrap4 style

This commit is contained in:
Alexandre Iooss 2020-02-21 12:29:11 +01:00
parent 8d87b2b8f5
commit b395d3a633
No known key found for this signature in database
GPG Key ID: 6C79278F3FCDCC02
3 changed files with 22 additions and 29 deletions

View File

@ -10,11 +10,10 @@ from .models import Club
class ClubTable(tables.Table): class ClubTable(tables.Table):
class Meta: class Meta:
attrs = { attrs = {
'class': 'class': 'table table-condensed table-striped table-hover'
'table table-bordered table-condensed table-striped table-hover'
} }
model = Club model = Club
template_name = 'django_tables2/bootstrap.html' template_name = 'django_tables2/bootstrap4.html'
fields = ('id', 'name', 'email') fields = ('id', 'name', 'email')
row_attrs = { row_attrs = {
'class': 'table-row', 'class': 'table-row',
@ -28,9 +27,8 @@ class UserTable(tables.Table):
class Meta: class Meta:
attrs = { attrs = {
'class': 'class': 'table table-condensed table-striped table-hover'
'table table-bordered table-condensed table-striped table-hover'
} }
template_name = 'django_tables2/bootstrap.html' template_name = 'django_tables2/bootstrap4.html'
fields = ('last_name', 'first_name', 'username', 'email') fields = ('last_name', 'first_name', 'username', 'email')
model = User model = User

View File

@ -11,10 +11,10 @@ class HistoryTable(tables.Table):
class Meta: class Meta:
attrs = { attrs = {
'class': 'class':
'table table-bordered table-condensed table-striped table-hover' 'table table-condensed table-striped table-hover'
} }
model = Transaction model = Transaction
template_name = 'django_tables2/bootstrap.html' template_name = 'django_tables2/bootstrap4.html'
sequence = ('...', 'total', 'valid') sequence = ('...', 'total', 'valid')
total = tables.Column() # will use Transaction.total() !! total = tables.Column() # will use Transaction.total() !!

View File

@ -47,36 +47,31 @@
<div class="col-md-9"> <div class="col-md-9">
<div class="accordion" id="accordionProfile"> <div class="accordion" id="accordionProfile">
<div class="card"> <div class="card">
<div class="card-header" id="headingOne"> <div class="card-header position-relative" id="clubListHeading">
<h5 class="mb-0"> <a class="btn btn-link stretched-link font-weight-bold"
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> data-toggle="collapse" data-target="#clubListCollapse"
aria-expanded="true" aria-controls="clubListCollapse">
<i class="fa fa-users"></i> {% trans "View my memberships" %} <i class="fa fa-users"></i> {% trans "View my memberships" %}
</button> </a>
</h5>
</div> </div>
<div id="clubListCollapse" class="collapse overflow-auto show" aria-labelledby="clubListHeading" data-parent="#accordionProfile">
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionProfile">
<div class="card-body">
{% render_table club_list %} {% render_table club_list %}
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="card-header" id="headingTwo"> <div class="card-header position-relative" id="historyListHeading">
<h5 class="mb-0"> <a class="btn btn-link stretched-link collapsed font-weight-bold"
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> data-toggle="collapse" data-target="#historyListCollapse"
aria-expanded="false" aria-controls="historyListCollapse">
<i class="fa fa-euro"></i> Historique des transactions <i class="fa fa-euro"></i> Historique des transactions
</button> </a>
</h5>
</div> </div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionProfile"> <div id="historyListCollapse" class="collapse overflow-auto" aria-labelledby="historyListHeading" data-parent="#accordionProfile">
<div class="card-body">
{% render_table history_list %} {% render_table history_list %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}