How to disable a horizontal scroll bar in Kanban boards

Still need help?

The Atlassian Community is here for you.

Ask the community

Platform Notice: Server and Data Center Only - This article only applies to Atlassian products on the server and data center platforms.





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:

  1. Go to Settings -> System -> Announcement Banner
  2. 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>



  3. Save the banner
  4. 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.



Last modified on Aug 21, 2019

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.