How to Minimize ngx-bootstrap Accordion box? - html

Question

I have an accordion in Html
<accordion [isAnimated]="true">
<accordion-group heading="Date Created">
{{ example text }}
</accordion-group>
</accordion>
I want to reduce the size of the box, text and the text when clicked. Basically reduce the size of entire box. How to do that?
I have tried these below which reduce the Header text and body text but not the box
<accordion-group panalClass="xyz">
<button
class="btn btn-link btn-block clearfix"
accordion-heading
type="button" panalClass="xyz"
>
<div class="pull-centre float-centre" style="background-color: blue;">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
I want to align the element with rest of the page.

Answer 1

Since I didnt find an option to resize it I found out that I have to use the angular generated classes (Shadow CSS concept) which can be seen in the elements section in console page. In this case it was ".panel-heading" and ".panel-body".
Use the angular class within your own class to make the effect IN styles.css to get the effect. Like this:
.accordion-small {
.panel-heading {
padding: 0px;
}
}
.accordion-small {
.panel-body {
padding: 5px;
font-size: small;
text-align: center;
}
}
In html:
<accordion [isAnimated]="true" class="accordion-small">
<accordion-group>
<button
class="btn btn-link btn-block clearfix"
accordion-heading
type="button"
>
<div class="pull-centre float-centre header-name">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
</accordion>
In component css
.header-name {
font-size: small;
}
Result:

Answer 2

Another way is you can use [panelClass]="customClass" to define the custom styling for your ngx-bootstrap accordion.
In css:
.custom-accordion-style {
/*any size you want*/
line-height: 30px;
font-size: small;
}
In ts:
customClass='custom-accordion-style';
In html:
<accordion [isAnimated]="true">
<accordion-group [panelClass]="customClass">
<button class="btn btn-link btn-block clearfix"
accordion-heading
type="button">
<div class="pull-centre float-centre">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
</accordion>