I am currently implementing Bootstrap accordions in an Angular application and I am facing an issue where I want to have a colored border all around each accordion panel. The problem is that by default, Bootstrap removes the top border from all accordions except for the first one. Despite trying various solutions, I can't seem to resolve this.
One of the attempts I made was:
.accordion-item:not(:first-of-type) {
border-top: 0;
This code snippet removes the top border as expected.
Some other solutions I tried include:
.accordion-item:{
border-top:4px !important;
}
.accordion-item:{
&:not(:first-of-type) {
border-top: 4px !important;
}
}
The last attempt resulted in the following computed styling for that element: accordion not having top border
I also experimented with adding margins between the accordion panels, but it did not solve the issue.
Upon further investigation, I still cannot identify what is overriding the top border settings. Does anyone have any insights on how to address this?
EDIT: While adding 'solid' resolved the initial problem, it introduced a new challenge: I am dynamically rendering the border color based on a variable within each accordion panel. Here is how I retrieve the color value:
<div
*ngFor="let finding of findings"
class="accordion-item"
[ngStyle]="{
'border-color': finding.level.color,
'border-top-color': finding.level.color
}"
>
However, the top border of non-first accordions consistently appears black (see image) https://i.stack.imgur.com/dN1ML.png
Below is a snippet from my CSS file:
.accordion-item{
border-width: 4px !important;
&:not(:first-of-type) {
border-top: 4px solid !important;
}
}
If anyone has a solution to this specific issue, your input would be greatly appreciated.