CSS Layout change

Johann Taljaard

Looking at the Projects >> Summary Tab

There is a description field that takes some HTML. The field is only about 50% of the screen. Is it possible to change the layout of this screen so that the description field could be 100% width?And then the rest could be underneath the description field?

The HTML we would like to include doesnt fit in to the 50% description field.

Thanks

MB_en15bm

Oh I see now. That is JIRA 4 and I downloaded/installed JIRA 4 to test that issue, so this is the summary.

When you have additional information to show about a project (like Versions and Activity Stream in this case) JIRA switces the layout so your description gets only 50% of the page instead of the original 100%. Now, this is how it looks like in their css file (layout.css is located on my machine at container/tomcat7x/cargo-jira-home/webapps/jira/ui/layout.css):

.type-a #primary {width:99.8%;}
.type-a #secondary {clear:left;width:99.8%}

.type-aa #primary,
.type-aa #secondary {width:49.9%;}

.type-ab #primary {width:74.538%;}
.type-ab #secondary {width:25.266%;}

.type-ba #primary {width:25.266%;}
.type-ba #secondary {width:74.538%;}

Pay attention to "type-a", "type-aa", "type-ab" and "type-ba" classes. One of these classes will be assigned to the BODY element of your html output, when JIRA creates its output web page, like this:

<body id="jira" class="nl type-a">

This has changed at my machine, as soon as I added any versions to the test project into this:

<body id="jira" class="nl type-aa">

So, it got shrinked to 50%. Now, when you understand what is going on, let's solve this properly.

First, load your html page, go to the view source and see what class was assigned to your BODY element. Then, locate and open your layout.css file and comment out the original class definition and copy/paste the definitionn of "type-a" class (which is 100% wide), like this:

.type-a #primary {width:99.8%;}
.type-a #secondary {clear:left;width:99.8%}

.type-aa #primary {width:99.8%;}
.type-aa #secondary {clear:left;width:99.8%}

/*
.type-aa #primary,
.type-aa #secondary {width:49.9%;}
*/

.type-ab #primary {width:74.538%;}
.type-ab #secondary {width:25.266%;}

.type-ba #primary {width:25.266%;}
.type-ba #secondary {width:74.538%;}

Reload your page and have a chocolate