Open Amitesh opened 3 years ago
I tried the below solution to fix it.
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups-new').multiselect({
enableCollapsibleOptGroups: true
});
enhanceCollapsibleButton();
});
function enhanceCollapsibleButton() {
$('#example-enableCollapsibleOptGroups-new').parent()
.find('.multiselect-container .caret-container')
.addClass('open');
$('#example-enableCollapsibleOptGroups-new').parent()
.find('.multiselect-container .caret-container')
.click(function() {
$(this).toggleClass('open close');
});
}
Styles:
.multiselect-container .caret-container {
position: relative;
cursor: pointer;
}
.multiselect-container .caret-container.open,
.multiselect-container .caret-container.close {
float: none;
height: initial;
width: initial;
font-size: 1rem;
padding: 0px 8px;
}
.multiselect-container .caret-container::after {
display: block;
position: absolute;
top: 50%;
right: -4px;
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
font-size: 1rem;
transition: transform 0.2s;
}
.multiselect-container .caret-container.close::after {
-webkit-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
}
Stackblitz url - https://stackblitz.com/edit/bootstrap-multiselect-group-example
I hope this will be helpful.
In
enableCollapsibleOptGroups
option, the open/close caret is not changing it's state on the collapse of options below.In below image we can see the caret state is same in open/close of group options.
How we can align it with its state?
Thanks