How to disable a horizontal scroll bar in Kanban boards
Platform notice: Server and Data Center only. This article only applies to Atlassian products on the Server and Data Center platforms.
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
Purpose
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 - Getting issue details... STATUS
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:
<!-- 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.