Portlet with chart in it isn't responsive - looking for a fix #7622

Hello,

We are using Angular and Typescript for our frontend and we have built a dashboard that implements multiple ngx-charts. Each chart is embedded in a portlet-body.

Adding up to that we have some divs above the chart for simple numbers. These divs are also placed in the portlet-body. Due to these divs, the portlet won't go around the divs and the chart. This only occurs in a mobile-sized browser. You can nicely see this problem in the picture.

I would be very happy about possible solutions to this problem. Thanks in advance, Julian Mayer

Current behavior:

Expected behavior (red lines represent the expected portlet dimensions):

The html below corresponds to the portlet of the picture. There are no special styles involved.

        <div class="row" *ngIf="isGranted('Pages.Rechnungen.Statistics')">
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height sales-summary-chart">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    {{"RechnungsausgangFinalisiert" | localize}}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body" style="height: 260px; min-height: 260px;">
                        <div class="row list-separated">
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    {{"Honorare" | localize}}
                                </h6>
                                <div>
                                    <span counto
                                          class="m--font-danger m--font-bolder"
                                          [step]="30"
                                          [duration]="1"
                                          [countFrom]="0"
                                          [countTo]="salesSummaryChart.totalHonorare"
                                          (countoChange)="salesSummaryChart.totalHonorareCounter = $event">
                                        {{salesSummaryChart.totalHonorareCounter.toFixed(0)}}
                                    </span>
                                    <span class="m--font-danger m--font-bolder">{{"EUR" | localize}}</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    {{"Buerogebuehren" | localize}}
                                </h6>
                                <div>
                                    <span counto
                                          class="m--font-danger m--font-bolder"
                                          [step]="30"
                                          [duration]="1"
                                          [countFrom]="0"
                                          [countTo]="salesSummaryChart.totalBuerogebuehren"
                                          (countoChange)="salesSummaryChart.totalBuerogebuehrenCounter = $event">
                                        {{salesSummaryChart.totalBuerogebuehrenCounter.toFixed(0)}}
                                    </span>
                                    <span class="m--font-danger m--font-bolder">{{"EUR" | localize}}</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    {{"Amtsgebuehren" | localize}}
                                </h6>
                                <div>
                                    <span counto
                                          class="m--font-danger m--font-bolder"
                                          [step]="30"
                                          [duration]="1"
                                          [countFrom]="0"
                                          [countTo]="salesSummaryChart.totalAmtsgebuehren"
                                          (countoChange)="salesSummaryChart.totalAmtsgebuehrenCounter = $event">
                                        {{salesSummaryChart.totalAmtsgebuehrenCounter.toFixed(0)}}
                                    </span>
                                    <span class="m--font-danger m--font-bolder">{{"EUR" | localize}}</span>
                                </div>
                            </div>
                        </div>
                        <ngx-charts-area-chart-stacked [results]="salesSummaryChart.data" [showXAxisLabel]="true" showYAxisLabel="true" [xAxis]="true" [yAxis]="true"                 [showGridLines]="false" [tooltipDisabled]="false">
                        </ngx-charts-area-chart-stacked>

                    </div>
                </div>
            </div> 
            ```