Forum Discussion
This is a work-around, but I was able to make the fields bigger by overriding the CSS layout in Jira using the open-source Stylus project. Stylus is free and available as a Firefox extension and Chrome extension. It allows you to can change elements on a web page, move them around, or hide them altogether. It works well, and is easy to toggle on and off as needed. But it does need you to fiddle with CSS elements in the browser developer tools (press F12 and go to the 'Elements' tab).
To illustrate, here's a screenshot of a Zephyr test case as it renders in my browser by default. The blue highlight shows the boundaries of the test details area. Notice how Jira's sidebar on the right takes up a third of the page.
After some experimentation in the browser developer tools, I made the test details area and its fields larger. The blue highlighted area shows the updated boundaries of the test detail area. The right-hand Jira sidebar is hidden, along with clutter in the top bar. I considered hiding the Zephyr attachments column, but decided to shrink it for now.
This feels like a good improvement to me. Everything works as expected, and I can read and write more test information. Only visual elements in the browser's rendering changed. If you're technical and would like to try it for yourself, below is the Stylus configuration that created the expanded view shown above. The comments at the top give links to more information and examples. In the middle are some general styles I made to make Jira friendlier to humans. The items specific to Zephyr test cases are at the bottom.
/* Basic CSS tutorial: https://www.freecodecamp.org/learn/responsive-web-design/basic-css/ */
/* Advanced CSS: http://lesscss.org/ and http://stylus-lang.com/ */
/* Documentation for writing styles: https://github.com/openstyles/stylus/wiki/Writing-styles
and for UserCSS https://github.com/openstyles/stylus/wiki/UserCSS-authors */
/* Make the JIRA modal "Edit" pop-up window wider and taller */
#edit-issue-dialog {
width: 95% !important;
margin-left: -48% !important;
margin-top: -20% !important;
}
/* Hide logo, feedback, and help links */
.aui-header .aui-header-logo img {display:none}
.aui-header .aui-icon {display:none}
.aui-header .aui-header-logo a {padding: 0 0px;}
.aui-header .aui-header-logo .aui-header-logo-text { display:none}
/* Make right-hand sidebar smaller with less padding */
/* Field names (Assignee, Reporter, etc) */
.item-details dl > dt {
width: 70px;
}
/* Field values (assignee names) */
#viewissuesidebar {
width: 190px;
padding-left: 0px;
}
/* Edit boxes in JIRA - these seem to be named dynamically */
#description-wiki-edit > #description { min-height: 600px !important;}
#mce_0_ifr { height: 600px !important;}
#mce_5_ifr {height: 600px !important;}
#mce_6_ifr {height: 600px !important;}
#mce_7_ifr {height: 600px !important;}
#mce_8_ifr {height: 600px !important;}
#mce_9_ifr {height: 600px !important;}
#mce_16_ifr {height: 600px !important;}
#mce_10_ifr {height: 600px !important;}
#mce_12_ifr {height: 600px !important;}
#mce_14_ifr {height: 600px !important;}
/* Reduce padding in issue list */
.list-results-panel .list-panel {
padding: 0px 10px 0 0;
}
panel .issue-list > li {
padding: 0px 0 5px 0px;
}
/* Shrink the search results column... */
.aui-item.list-results-panel { width: 140px !important;}
/* Hide the sidebar with People, Date, Agile information */
#viewissuesidebar {display:none}
/* Hide announcement banner */
#announcement-banner {display:NONE !important}
/* Make Zephyr test step frame taller */
/* Outer frame must be big enough for inner table...*/
#view_issue_steps_section {height: 950px}
/* Make inner frame a little bit smaller than the outer frame*/
#vanillaGridWrapper > div.table-container-wrapper{max-height: 850px;}
/* Shrink the attachments column*/
#unfreezedGridBody > div.row-column.grid-column.attachmentsMap-column{min-width:20px; width:20%}
#unfreezedGridHeader > div.grid-column.attachmentsMap-column{min-width:20px; width:20%}
The above example is for my tastes and needs. Experiment with the numbers and CSS elements to find what works for you. Hopefully others will find this post useful. It's a bit of a browser hack, but it works for now, until a more elegant or official solution is available.
Love,
Happier Little-Acorn
Related Content
- 4 years ago
Recent Discussions
- 5 days ago