Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How can I hide the right hand sidebar when I am viewing a jira issue

I want to share my screen and have another browser window open with non jira content. So space is limited - I just want to focus on the jira description & hide both left and right sidebars. I can see how to hide the left but not the right sidebar. Any help is much appreciated!

7 answers

1 accepted

if you add a bookmark to your browser which "links" to the following javascript, then clicking on that bookmark will toggle Jira's right-hand sidebar off/on:

 


javascript: (function(){const e = document.getElementById('viewissuesidebar'); e.style.display=(e.style.display==='none' ? '' : 'none');})()


 

.. the forum software here is mangling the code above. awesome.

the ":" after "javascript" should be a regular colon like ":".

 

i'll try putting it here, not in a code-block:

javascript:(function(){const e = document.getElementById('viewissuesidebar'); e.style.display=(e.style.display==='none' ? '' : 'none');})()

 

nope same diff. 

 

Thanks a lot Orion - really appreciate your help!

This works well but I needed to remove : and add an actual colon as the former gave an invalid url:

javascript:(function(){const e = document.getElementById('viewissuesidebar'); e.style.display=(e.style.display==='none' ? '' : 'none');})()

 

The above didn't work for me with the new Jira issues view.  I modified it to use the following, which is working for me:

javascript:(function(){const e = document.querySelector("#jira-frontend > div.sc-kGXeez.dtCPvf > div > div.css-ld3atn > div.css-1f63klf > div > div > div.sc-dVhcbM.feaefy > div.sc-bhVptL.fMYuYl > div > div.sc-iupvsZ.dFHhoC > div.sc-fBuWsC.dNYYtH > div > div.sc-beROAQ.jFnPZr"); e.style.display=(e.style.display==='none' ? '' : 'none');})()

The above no longer work.  Keep reading through this thread for an answer.

This currently works:

javascript: (function(){const e = document.querySelector("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parentElement;e.style.display=(e.style.display==='none' ? '' : 'none');})()

Like # people like this

Thank you Sean! Works like a charm :-)

I can't believe this is the solution to this problem.
Why does Atlassian want to waste half of my screen on useless bs in the first place?

It's unbeleivable.

exactly :/ It is a pity that the UX UI guys haven't picked this up and fixed this yet. It seems like we are now hacking our way around their product. Disappointed

Like # people like this

Hi Andrew,

If you have an access to Announcement Banner configuration, you can try to put this script:

<script>
AJS.toInit(function () {
AJS.$("#viewissuesidebar").hide();
});
</script>

 If you are going to hide right panel only for you - try to use some browser extension to add custom script to pages. For example for Chrome https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en

Thanks Gregor - much appreciated!

Hi Andrew, you can use this: https://userstyles.org/styles/138944/jira-expand?view=openid
or create a custom field with javascript to hide viewissuesidebar div element.

Thanks Aleksandr - much appreciated!

Hi there,

I tried almost all the option provided above , but nothing is working for me. Or could be that I am not following the steps correctly. Could any one of you please provide me the exact step by step process ? please keep in mind I am not from a technical background.

I really appreciate your help. 

Cheers

@Chris Wolf's code worked for me. Create a bookmark with the following as the URL, but replace "&colon;" with an actual full colon: 

javascript&colon;(function(){const e = document.querySelector("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parentElement;e.style.display=(e.style.display==='none' ? '' : 'none');})() 
Like # people like this

Awesome that worked. Thanks @Nathaniel Holder  and everyone. 

Cheers

Thanks @Nathaniel Holder, @Chris Wolf, et al. This solution is working for me as of right now.

It seems we no more have viewissuesidebar element.

I had to modify above selector to:

javascript&colon;(function(){const e = document.getElementsByClassName('sc-fwNAQS euqTza')[0]; e.style.display=(e.style.display==='none' ? '' : 'none');})()

unfortunately the class name you referenced doesn't appear on my issue view page either. Judging from the value I'm guessing its generated and not static, and will change, maybe depending on user or page load?

I ran this JS script in the console, and it seems to work. That `div` has a definitive `data-test-id` attribute set that we can use to select it:

document.querySelector("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parentElement.style.display = "none"
Like Jim likes this

That's great - we can wrap that in a self-executing function Javascript block with Javascript URL scheme, as suggested by @orion elenzil :

javascript&colon;(function(){const e = document.querySelector("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parentElement;e.style.display=(e.style.display==='none' ? '' : 'none');})()

Then add that URL as a bookmark. Note that you need to have a real colon rather then the entity, as rendered here.

Like # people like this

The solution I found was https://snippi.com/s/6nqpmo9

A toggle button for hiding the Jira RHS panel.

 

This avoids the annoying issue with the Atlassian site here corrupting colons, as I tried to do the substitution, but failed despite a few attempts. What is it! Is my keyboard the wrong language? Is there more than one type of colon? was it a double colon needed? Or to replace &colon; with just colon? SO after more than half a dozen attempts, you need to accept it is probably a PICNIC error. So I went digging elsewhere.. and voila... snippi to the rescue. 

Thank you to Zach Morris for posting this code in another thread. Thank you!  

This is standard substitution of certain unsafe characters with equivalent SGML character entities and is not a bug with Atlassian community board.  All you have to do is replace the character entity, "&colon;" with the single actual colon character.

BTW, the code in that snippet seems to depend on the nested structure of the HTML so if the nesting changes, then the code will break - you're better off selecting elements based on specific "id" attribute values.

Suggest an answer

Log in or Sign up to answer
TAGS

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you