I am currently working on implementing a Bootstrap accordion in my application. The parent element of the accordion has a background color set, however, when I expand the accordions, it increases the height of the page and the background color does not cover the extended area.
Here is my HTML structure:
<div id='wrapper>
<accordion id='accordion' close-others="false">
<accordion-group>
<accordion-heading >
<h2 class='title'>Title 1</h2>
</accordion-heading>
<div id="first" class="panel-collapse collapse in">
//contents...
</div>
</accordion-group>
//I have 5 to 6 accordion group.
</accordion>
</div>
Regarding the CSS, here is what I have tried:
//I initially used height:100% which worked well upon initial loading but caused issues after expanding the accordions.
#wrapper{
background-color: red;
height: 100%;
display: block;
}
If anyone has any insights or suggestions on how to address this issue, your help would be greatly appreciated. Thank you!