Disable horizontal scroll bar in kanban boards
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
Summary
Starting from JIRA Software 8.1, Kanban boards will show a horizontal scroll bar in case the number of columns is too high. This might not be desired in some circumstances.
Solution
There is a feature request logged to enable this behavior to be configured: JRASERVER-69801 Disable horizontal scrollbar on board.
As a temporary workaround, the minimum width of cards on a Kanban board can be decreased to allow more columns fit into a screen before the horizontal scroll bar is rendered:
Go to Settings > System > Announcement Banner.
Insert or append the following to the announcement banner:
1 2 3 4 5 6<!-- JRASERVER-69801: workaround with a custom fix for the board columns width --> <style> .ghx-rapid-views #gh #ghx-work #ghx-pool-column .ghx-columns, .ghx-rapid-views #gh #ghx-work #ghx-pool-column #ghx-column-headers, .ghx-rapid-views #gh #ghx-work #ghx-pool-column .ghx-zone-overlay-table { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .ghx-rapid-views #gh #ghx-work #ghx-pool-column .ghx-columns, .ghx-rapid-views #gh #ghx-work #ghx-pool-column #ghx-column-headers, .ghx-rapid-views #gh #ghx-work #ghx-pool-column .ghx-zone-overlay-table {min-width: 100px;} .ghx-rapid-views #gh #ghx-work #ghx-pool-column .ghx-columns .ghx-column, .ghx-rapid-views #gh #ghx-work #ghx-pool-column #ghx-column-headers .ghx-column, .ghx-rapid-views #gh #ghx-work #ghx-pool-column .ghx-zone-overlay-table .ghx-column, .ghx-rapid-views #gh #ghx-work #ghx-pool-column .ghx-columns .ghx-zone-overlay-column, .ghx-rapid-views #gh #ghx-work #ghx-pool-column #ghx-column-headers .ghx-zone-overlay-column, .ghx-rapid-views #gh #ghx-work #ghx-pool-column .ghx-zone-overlay-table .ghx-zone-overlay-column {min-width: 100px;} </style>Save the banner.
Reload your board.
The above action will effectively halve the allowed width of cards from 200px to 100px, so they will fit more nicely. The minimum allowed width of cards can be set to any value by replacing "100px" occurrences in the code above with a new value.
Was this helpful?