Make Workfront Full Screen (in Chrome)

[CraigLa]

Workfront's fixed width at 1400px drives me nuts. I have 2560px of horizontal screen space. If I could use that full width it might mean being able to add 4 to 5 more columns into a task view, or use the gantt chart while actually seeing all the important columns. For anyone else annoyed by this, here is a quick solution. Step 1: Get the stylebot plugin for chrome. Step 2: Click into Options -> styles -> "Add a new style..." Step 3: For the pattern use yoursubdomain.attask-ondemand.com (you can use /projects or other at the end if you only want to go full screen in a certain area). Then enter the CSS below into the style area: .page-content-width { max-width: 99%; } .table-list { width: 100%; } .table-list-head { width: 100%; } .listWrapper { width: 100%; } .listToolbar { width: 99%; } Now refresh and you should be in full screen mode. See attachment for example.

[AdinaPi1]

Thanks for the awesome tip!! I have many views with 10+ columns, and this makes my life so much easier! No more scrolling required!

[JonathanSe]

Thank you Craig!!!!!!! I submitted a product request about this a while ago. Now I can use all of the glorious real-estate on my 27" Cinema display!!! Why Workfront can't implement this themselves is beyond me...

[CraigLa]

I submitted this as a request too a few months ago. When I actually looked at how little CSS needed to change I was surprised. I thought the reason they didn't implement the request was because it was very hard or would break something.

[JonathanSe]

It doesn't seem to work with the gantt, but I'll take having the extra width regardless...thanks again!

[DavidCo3]

Yes - the only issue I can see is the gantt doesn't work. If there is any way you can fix this, I would roll it out to all my users.....it would make everyone's life so much easier! Or - Workfront, please fix it for us! :)

[CraigLa]

If I get some time later today I will look at fixes for the Gantt chart. I'm concerend that the Gantt is resizing the task view container when it loads. That might be difficult to work around. I can make the inside of the Gantt container white, but you would loose the horizontal scrolling capbility. I will havet to do some thinking on it.

[CraigLa]

The CSS at the bottom of this post will allow Gantt to work, however it will not allow scrolling of the columns behind the Gantt chart. Instead all the columns are moved to the left. I have specific views setup for Gantt charts with limited columns, so this will work for me. It might not be ideal for everyone though. I won't get into the details, but it appears that it would be pretty hard to replicate the scrolling behind the Gantt chart via this CSS modification method. Workfront could do this easily, but it needs to be something done in their JavaScript code. .page-content-width { max-width: 99%; } .table-list { width: 100%; } .table-list-head { width: 100%; } .listToolbar { width: 100%; left: 0px; }

[CraigLa]

One more update here. While I was at it I changed the colors on the Gantt chart a bit. I really dislike the look of the new HTML based Gantt. The concept is a step in the right direction, but the choice of colors is tough on the eyes, especially the super dark black predecessor lines. If you add the CSS below to the other (or run it on its own) it will change the look of the Gantt chart as shown in the attached image:

.predecessor-line { stroke:

#ccc

; }

.predecessor-dot { fill:

#ccc

; }

.bubble-bk { stroke:

#8cb9d6

; }

.progress { fill-opacity: .5; fill: #083456; }

.progress-text.dark { color: #888; }

.parent-indicator { fill:

#7a95a9; stroke: #457e9e; }

[DavidCo3]

Nice work Craig! Will check it out......

[GregGu]

When I search for the Stylebot I receive numerous results... Can you provide the URL? tx

[CraigLa]

https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en This is a plugin for chrome only, however you can probably find something for IE or Firefox that does the same thing.

[Doug_Den_Hoed__AtAppStore]

Hi Craig, Thanks for this excellent tip -- and interesting precident! One of my colleagues recorded a video of the steps to make it easier for our clients to adjust their browsers, which I'd like to share with those who'd like to see it in action: http://www.screencast.com/t/8eVZskNiAi Regards, Doug

[DavidCo3]

We've found that most users absolutely love having Workfront displaying in wide-screen. As an analogy, I reckon it is similar to the feeling you get when you first take off ski goggles (or a snorkel mask). The only issue I've found is that some matrix reports don't display properly (dashboard or otherwise) but it is worth having it wide-screen for the rest of the time, even if you have to switch it off occasionally. Hopefully Workfront adopt this and make it standard for all users soon.

[CraigLa]

I haven't seen issues with matrix reports yet. It might be possible to fix that. Is it some particular area (like a dashboard) that is causing the problems?

[DavidCo3]

Hi Craig, There are two cases that I have seen issues with Matrix reports: On a dashboard, I have two matrix reports plus several other chart reports. The matrix reports have one vertial grouping and one horizontal grouping. Including the Total column, there are 4 columns on the report. Around 50% of the time, the matrix reports load using the full screen width. The other 50% of the time the reports load quite narrow on the left of the screen (taking up approx 25% of the screen width). Sometimes it is only one, and sometimes both of them do this....completely random. I usually have to reload the page a couple of times so that I can get both matrix reports displaying full width. The rest of the chart reports always display perfectly. I have a different matrix report, which I am running directly (not via a dashboard). Sometimes this report shows with the last row (totals) off the bottom of the screen. Today I actually can't fault it but if I can find an example I can replicate which is consistent I will let you know. Cheers

[KatherineHa1]

Thanks Craig! I followed your video, very helpful. But where do i put the css code for Gantt fix?? is that instead of the original css code, or in addition to?

[CraigLa]

You would replace all the CSS code. The Gantt fix acutally involved removing one of the style declarations. For either the full screen Gantt fix, or the full screen Gantt fix with update styling, delete all the CSS that is there now and replace with the new CSS.

[PhilipSt]

Thanks Craig! You are a Star.... .... Nate!! I nominate Craig for the Super Scout Badge :) Cheers, Phil

[NateBa]

I read you loud and clear, Phil! In Reply to Phil Stickland:

Thanks Craig! You are a Star.... .... Nate!! I nominate Craig for the Super Scout Badge :) Cheers, Phil

-Nate Bagley --- Workfront Community Manager - Work Smart, Work Happy Message me directly at:

[KatherineHa1]

Got it, thanks. It doesn't seem to work on the People>Teams pages though? see attached. Are you experiencing the same?