> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack-code/looks/report-filter-container.md).

# Report Filters Container Size

How to restrict the container size for reporting filters to prevent report shifting

![Two reports side by side no matter how many filters are added](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-Ma5fcdlonExlvP0qjZs%2F-Ma9PgN7aTrda1Y3-JFa%2Fimage.png?alt=media\&token=484ffa54-b690-4457-90db-493f5bad06c8)

### The JS

None needed 😎

### The CSS

```
/*Prevents Report Filters from increasing report container size and pushing 2nd report down*/
#view_679 .kn-records-nav { max-width: 630px; }
```

### How to Implement

We simple define the `max-width` of the left report (our Bar chart) to its defined dimensions under Chart Properties.

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-Ma5fcdlonExlvP0qjZs%2F-Ma9QHAK6ygFM6CoI-c_%2Fimage.png?alt=media\&token=1235f53c-bb18-43ed-b117-8b2fb8dc8d81)

The View ID will need to be updated accordingly

```
#view_679 .kn-records-nav { max-width: 630px; }
```

For reference the second report, our Pie chart in the example above, is sized so both reports can fit side by side on the page.

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-Ma5fcdlonExlvP0qjZs%2F-Ma9RDZ6mKfF7cnSN1iB%2Fimage.png?alt=media\&token=94d2d983-4d99-4062-93d9-5d8fe6d79bd3)