Adminlte: [BUG] Parent Card collapse change nested card collapsable icon
I've seen issue #1725
Describe the bug
When I have a Card that can be collapsed, with nested cards that can be collasped too, the icon change when Parent card is collapsed.
To Reproduce
Steps to reproduce the behavior:
- Make a Card with nested cards that can be collapsed
- Collapse Parent
- Open Parent
- Error on icons of nested Cards
Here is my code :
<div class="card">
<div class="card-header">
<h3 class="card-title"><i class="fa fa-tools"></i> {{ res.__('Paramétrage')}}</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
</div>
</div>
<div class="card-body">
<form id="form_multi_step" class="form-horizontal" role="form">
<!-- *** STEP 5 *** -->
<div class="form-tab">
<div class="card bg-primary collapsed-card">
<div class="card-header">
<h3 class="card-title"><i class="fa fa-info mr-2"></i>{{ res.__("Informations") }}</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
</div>
</div>
<div class="card-body">
<p>
{{ res.__("Quantité de matière restante") }} : <span id="span_mat_rest"></span>
</p>
</div>
<div class="card-footer">
{{ res.__("Ces données ne sont qu'à titre informatives, elles ne peuvent être modifiées") }}.
</div>
</div>
<div class="card collapsed-card">
<div class="card-header">
<h3 class="card-title"><i class="fa fa-eye mr-2"></i>{{ res.__("Type d'aperçu") }}</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
</div>
</div>
<div class="card-body">
<div class="">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="print_core_or_final">
<label class="custom-control-label" for="print_core_or_final">{{ res.__('Dessin noyau') ~ " / " ~ res.__('Version PDF')}}</label>
</div>
</div>
</div>
</div>
<div class="card collapsed-card">
<div class="card-header">
<h3 class="card-title"><i class="fa fa-toolbox mr-2"></i>{{ res.__("Configuration")}}</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label>{{ res.__("Langue") }}</label>
<select id="select_language_list" class="form-control select2" style="width: 100%" tabindex="-1" aria-hidden="true" data-minimum-results-for-search="Infinity">
<option value="fr" selected>{{ res.__("Français") }}</option>
<option value="en">{{ res.__("Anglais") }}</option>
</select>
</div>
<div class="form-group">
<label for="print_scale">{{ res.__("Echelle d'impression") }} : <span id="print_scale_label"></span></label>
<input type="range" class="custom-range" id="print_scale" min="0" max="80" step="1" value="0">
</div>
<div class="form-group">
<label>{{ res.__("Unité de mesure") }}</label>
<select id="select_unit_of_measure" class="form-control select2" style="width: 100%" tabindex="-1" aria-hidden="true" data-minimum-results-for-search="Infinity">
<option value="metrique" selected>{{ res.__("Métrique") }}</option>
<option value="inch">{{ res.__("Inch") }}</option>
</select>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title"><i class="fa fa-print mr-2"></i>{{ res.__("Options sur l'impression") }}</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<h6 class="mt-lg-2"> {{ res.__("Données") }}</h6>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="check_print_title_provider" value="1" checked>
<label for="check_print_title_provider" class="custom-control-label">{{ res.__("Afficher le fournisseur") }}</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="check_print_title_core_ref" value="1" checked>
<label for="check_print_title_core_ref" class="custom-control-label">{{ res.__("Afficher la référence du noyau") }}</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="check_print_title_ring" value="1" checked>
<label for="check_print_title_ring" class="custom-control-label">{{ res.__("Afficher bagué ou non") }}</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="check_print_info_dimension" value="1">
<label for="check_print_info_dimension" class="custom-control-label">{{ res.__("Afficher le couple données D.fil et Allongement") }}</label>
</div>
</div>
</div>
<div class="col-lg-6">
<h6 class="mt-lg-2"> {{ res.__("Schéma") }}</h6>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="check_print_impact_point" value="1" checked>
<label for="check_print_impact_point" class="custom-control-label">{{ res.__("Dessiner") ~ " " ~ res.__("Point d'impact du fil") }}</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="check_print_wire" value="1">
<label for="check_print_wire" class="custom-control-label">{{ res.__("Dessiner") ~ " " ~ res.__("Le fil") }}</label>
</div>
</div>
{#<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="check_print_ring" value="1">
<label for="check_print_ring" class="custom-control-label">{{ res.__("Dessiner") ~ " " ~ res.__("Anneau") }}</label>
</div>
</div>#}
</div>
</div>
</div>
</div>
<div class="card bg-secondary collapsed-card">
<div class="card-header">
<h3 class="card-title"><i class="fa fa-file-signature mr-2"></i>{{ res.__("Données supplémentaires") }}</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
</div>
</div>
<div class="card-body">
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="print_granulometry">{{ res.__('Granulométrie') }}</label>
<div class="input-group col-sm-8">
<input id="print_granulometry" name="print_granulometry" class="form-control input-float form-no-auto-valid" type="text">
<div class="input-group-append">
<span class="input-group-text">µ</span>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="print_client">{{ res.__("Client") }}</label>
<div class="input-group col-sm-8">
<input id="print_client" name="print_client" class="form-control form-no-auto-valid" type="text" placeholder="...">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="print_commentary">{{ res.__("Commentaire") }}</label>
<div class="input-group col-sm-8">
<textarea id="print_commentary" class="form-control" rows="3" placeholder="..."></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button id="nextBtn" class="btn btn-default float-right">{{ res.__('Suivant')}} <i class="fa fa-arrow-right"></i></button>
<button id="prevBtn" class="btn btn-default"><i class="fa fa-arrow-left"></i> {{ res.__('Précédent')}}</button>
</div>
</div>
Expected behavior
Collapse Card Parent don't affect nested cards
Screenshots
Normal display:
When parent is collasped:
Error when re-opening parent:
Environment :
- AdminLTE Version: v3.0.1 (Latest)
- Operating System: Windows 10
- Browser (Version): Firefox (Latest)
cavasinf
>All comments
I've added a fix for this issue in master branch 😄
REJack
on 17 Jan 2020
🚀1
👍1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
RaruRv
·
3Comments
vbetancourt
·
3Comments
gaea44
·
3Comments
esaesa
·
3Comments
kgoedert
·
4Comments
Most helpful comment
I've added a fix for this issue in master branch 😄