How can I change the description field on JIRA's create issue page to be full width?

Andreas Knecht
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
October 23, 2013

For some users the create form textareas are too narrow. Is there a way to expand it to full width?

5 answers

1 accepted

2 votes
Answer accepted
Andreas Knecht
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
October 23, 2013

This can be achieved with various browser extensions. A Chrome extension that works is Stylebot: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en

The CSS that needs to be installed for the create issue page is:

.aui-page-panel {
    width: 100%;
}

form.aui .long-field {
    max-width: 1000px;
}

francis
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
November 17, 2014

Thanks for this Andreas.

Nelson Manio March 16, 2015

In which file would I need to add the CSS code above ? - nmanio@mssngsolutions.ph

Andreas Knecht
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 17, 2015

@Nelson Manio you can use a browser extension such as https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en for example to apply the CSS to the page.

Will Sheppard February 11, 2016

This doesn't work for JIRA v6.4.12

gianni May 28, 2019

Hi - could this be applied to the Description field within an existing ticket? If so, what would you set as the URL so that it works for every issue and not just a specific one?

Thanks

Adam Dulberg May 29, 2019

Hi Gianni,

 

If you're seeking how to modify the width of the description field (text fields)

  1.  Follow the suggestion above to add a CSS editor to your chrome panel (or if using another browser, find an applicable extension). Suggest stylebot
  2. Then modify the element ".editable-field" (everything within the quotes)
  3. See my note at the bottom of this thread, change the max width. If you have "live preview" checked, you should see the text fields contract or expand.
0 votes
Adam Dulberg September 27, 2018

Updating this thread; continue to use a CSS editor (confirming Stylebot works as of 9/27/18), however to affect all editable text fields use the following;

.editable-field {
max-width: 800px;
}
0 votes
Somaiah Kumbera November 15, 2016

You can force the text window to be a larger width by adding some text that cannot be formatted, like a URL for example within the description text. 

0 votes
Stefano De Gaetano
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 21, 2015

Hi all,

this workaround works for me, but I want the new style is applied for every users that work in my JIRA installation, without they install the chrome add-in! How can I modify the style in some files on the server installations?

Thanks in advance..

0 votes
Thiré Simon March 26, 2015

Hi,

 

This css works well with Stylbot for Chrome but not witj Stylish for FireFox .
Do you know why ?

Thanks in advance

Will Sheppard February 11, 2016

This isn't an answer. It should be posted as a comment to the actual answer above, or even as a separate question, referencing this one

brianjmurrell December 19, 2022

None of this is the answer.  I shouldn't have to install browser extensions and do coding work to simply get a usefully and unnecessarily constrained data entry dialog.

Suggest an answer

Log in or Sign up to answer