Defect #7280

Issues subjects wrap in Gantt

Added by Luis Serrano Aranda almost 7 years ago. Updated over 6 years ago.

Status:ClosedStart date:2011-01-11
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:Gantt
Target version:1.1.2
Resolution:Fixed Affected version:1.1.0

Description

When I see the Gantt chart the subject of the petition if you have more than one line in length is cut

Capture.JPG (128 KB) Luis Serrano Aranda, 2011-01-18 16:25

Capture.JPG (23.8 KB) Luis Serrano Aranda, 2011-01-28 15:16

gantt_subjects_truncation.patch Magnifier (5.19 KB) Etienne Massip, 2011-02-01 16:30

gantt.png (30.9 KB) Matthias Neubert, 2011-02-09 17:09

gantt_subject_truncation_updated.patch Magnifier (6.99 KB) Pieter Nicolai, 2011-02-17 14:28

gantt_truncate_subjects_add_tooltip.diff Magnifier (7.15 KB) Pieter Nicolai, 2011-02-21 15:56


Related issues

Related to Redmine - Defect #7807: Gantt subjects rendering is broken with IE6/IE7 Closed 2011-03-08
Duplicated by Redmine - Defect #7514: Gantt: Issues names not diplayed properly when wrapped to... Closed 2011-02-01

Associated revisions

Revision 4780
Added by Jean-Philippe Lang almost 7 years ago

Removed issue subjects wrapping in gantt (#7280).

Contributed by Etienne Massip.

Revision 4782
Added by Jean-Philippe Lang almost 7 years ago

Reverted r4780 that broke gantt tests (#7280).

Revision 4913
Added by Jean-Philippe Lang over 6 years ago

Prevent text wrap in gantt subjects (#7280).

Revision 4914
Added by Jean-Philippe Lang over 6 years ago

Adds full subject as gantt subject title (#7280).

Revision 4916
Added by Jean-Philippe Lang over 6 years ago

Extracts gantt subjects styles to css (#7280).

History

#1 Updated by Luis Serrano Aranda almost 7 years ago

Hello, no one does this happen?

Thanks

I attach a capture.

#2 Updated by Dirk Schmidt almost 7 years ago

Same happens in our Redmine.
Exactly like in the Screencapture of Luis Serrano Aranda

#3 Updated by Will Vanderpol almost 7 years ago

Happens in ours as well.

#4 Updated by Siegfried Vogel almost 7 years ago

+1

#5 Updated by Luis Serrano Aranda almost 7 years ago

I have worked, if not quite right and looks good also in internet explorer

Change in /redmine/lib/redmine/helpers/gantt.rb

Older line 183
options[:top_increment] = 20 unless options.key? :top_increment

New line 183
options[:top_increment] = 30 unless options.key? :top_increment

Old line 711
output= "<div class='......line-height:1.2;height:16px....>

New line 711
output= "<div class='......line-height:1.6;height:28px....>

And in the file /redmine/app/views/gantts/show.html.erb

Old line 65

g_height = [(25.....

New line 65

g_height = [(30.....

I think this great and improves the gantt visualization

Thanks for your attention and sorry for my english

#6 Updated by Dirk Schmidt almost 7 years ago

Nearly perfect solution, but if you have a lot of Tickets there is not enough place if you scroll down the Gantt

#7 Updated by Luis Serrano Aranda almost 7 years ago

You have changed the file /redmine/app/views/gantts/show.html.erb ?

Put a bigger number I think is this parameter

#8 Updated by Dirk Schmidt almost 7 years ago

Your Solution works perfect. Thanks :) Good Work!
I think the Problem that i had after was caused of the Browsers Cache.

#9 Updated by Stefan Langenmaier almost 7 years ago

+1

The fix from Luis Serrano Aranda works, but now every row has the additional height. This can be used to work but it's not ideal yet. What happens if a title takes up the space for three lines? The best thing would be that it grows depending on the text.

Never the less, thank you very much for your work.

#10 Updated by Etienne Massip almost 7 years ago

  • File gantt_subjects_truncation.patch added

What about truncating the subjects in the subjects column, as the full issue subject is displayed by the tooltip in the diagram part ?

Here's a patch.

We could also add a tooltip on subject if truncated...

#11 Updated by Luis Serrano Aranda almost 7 years ago

I make changes to the files without my modification?

With Internet Explorer if the subject is truncated fails to calculate the position.

#12 Updated by Luis Serrano Aranda almost 7 years ago

What do you have changed in the line 360 (file gantt.rb) ?

Thanks

#13 Updated by Etienne Massip almost 7 years ago

Just " for ' (single quotes), absolutely useless.

#14 Updated by Luis Serrano Aranda almost 7 years ago

Ups is true sorry

#15 Updated by Stefan Langenmaier almost 7 years ago

Very nice solution! It working here.

#16 Updated by Etienne Massip almost 7 years ago

Luis Serrano Aranda wrote:

I make changes to the files without my modification?

With Internet Explorer if the subject is truncated fails to calculate the position.

Yep, damn IE6.

#17 Updated by Etienne Massip almost 7 years ago

  • Subject changed from Problems in Gantt to Issues subjects are truncated in Gantt

#18 Updated by Etienne Massip almost 7 years ago

  • File gantt_subjects_truncation.patch added

Should work with IE6 too now.

#19 Updated by Etienne Massip almost 7 years ago

  • File deleted (gantt_subjects_truncation.patch)

#20 Updated by Jean-Philippe Lang almost 7 years ago

  • Status changed from New to Closed
  • Target version set to 1.1.1
  • Resolution set to Fixed

Etienne, thanks for the patch. Committed in r4780 and merged in 1.1-stable.

#21 Updated by Jean-Philippe Lang almost 7 years ago

  • Status changed from Closed to Reopened
  • Target version deleted (1.1.1)
  • Resolution deleted (Fixed)

The patch broke gantt unit tests and was reverted in r4782 (http://www.redmine.org/builds/index.html).

#22 Updated by Etienne Massip almost 7 years ago

  • File gantt_subjects_truncation.patch added

Yes, I knew it, sorry.

This one should pass test.

#23 Updated by Etienne Massip almost 7 years ago

  • File deleted (gantt_subjects_truncation.patch)

#24 Updated by Etienne Massip almost 7 years ago

  • File deleted (gantt_subjects_truncation.patch)

#25 Updated by Etienne Massip almost 7 years ago

This one should pass test and be compatible with IE6.

#26 Updated by Luis Serrano Aranda almost 7 years ago

Perfect but when I put the title in all caps, when exporting to pdf gives problems

Thanks

#27 Updated by Etienne Massip almost 7 years ago

Luis Serrano Aranda wrote:

Perfect but when I put the title in all caps, when exporting to pdf gives problems

Thanks

What kind of problem ? This patch is not supposed to have any impact on PDF export, are you sure that your problem was not present before you applied the patch ?

#28 Updated by Matthias Neubert almost 7 years ago

This patch seems to just cut of the long names of issues.
This is not very usefull when the gantt chart is printed (hence no mouseover)
-> Why not have 2 lines or more when name is soo long, but displayed proper an not
shown als little dots under the first line.

btw: no hard problems with Redmine 1.11 and patch applied.
-> but when last word before truncation is too long, the word it self and "(..)" overlaps with
the bar in diagram of this issue.

#29 Updated by Etienne Massip almost 7 years ago

Yes, this patch is not nearly a perfect solution, it just enhances the Gantt visual aspect by removing subject overlapping.

Subject length mostly overstep default width of the subjects div (at least on my redmine) so there would be almost half the issues eventually listed on the screen, that could be a problem.

This is not very usefull when the gantt chart is printed (hence no mouseover)

Gantt tab is not very well suited for direct screen printing, is it ? PDF should be a better choice ?

but when last word before truncation is too long, the word it self and "(..)" overlaps with

the bar in diagram of this issue.

Could you post a screenshot ? What browser are you using ?

#30 Updated by Matthias Neubert almost 7 years ago

I use Firefox 3.6, screen shot of th pdf is attached

#31 Updated by Etienne Massip almost 7 years ago

As I said before :

This patch is not supposed to have any impact on PDF export, are you sure that your problem was not present before you applied the patch ?

#32 Updated by Pieter Nicolai almost 7 years ago

Entienne, thanks for the patch. It solves the issue, however, your new patch still breaks 3 unit tests.

  1) Failure:
test: #subject_for_issue :html format should add an absolute positioned div. (Redmine::Helpers::GanttTest)
    [/test/unit/lib/redmine/helpers/gantt_test.rb:620:in `__bind_1297945857_987240'
     shoulda (2.10.3) lib/shoulda/context.rb:362:in `call'
     shoulda (2.10.3) lib/shoulda/context.rb:362:in `test: #subject_for_issue :html format should add an absolute positioned div. ']:
Expected at least 1 element matching "div[style*='absolute']", found 0.
<false> is not true.

  2) Failure:
test: #subject_for_project :html format should add an absolute positioned div. (Redmine::Helpers::GanttTest)
    [/test/unit/lib/redmine/helpers/gantt_test.rb:288:in `__bind_1297945862_896580'
     shoulda (2.10.3) lib/shoulda/context.rb:362:in `call'
     shoulda (2.10.3) lib/shoulda/context.rb:362:in `test: #subject_for_project :html format should add an absolute positioned div. ']:
Expected at least 1 element matching "div[style*='absolute']", found 0.
<false> is not true.

  3) Failure:
test: #subject_for_version :html format should add an absolute positioned div. (Redmine::Helpers::GanttTest)
    [/test/unit/lib/redmine/helpers/gantt_test.rb:454:in `__bind_1297945867_486670'
     shoulda (2.10.3) lib/shoulda/context.rb:362:in `call'
     shoulda (2.10.3) lib/shoulda/context.rb:362:in `test: #subject_for_version :html format should add an absolute positioned div. ']:
Expected at least 1 element matching "div[style*='absolute']", found 0.
<false> is not true.

946 tests, 3639 assertions, 3 failures, 0 errors

This happens because you moved this css to application.css, making these tests unnecessary:

+.gantt_subject { position: absolute; height: 16px; line-height: 1.2em; }
+.gantt_subject-text { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

I removed these tests and made an updated patch.

#33 Updated by Etienne Massip almost 7 years ago

Thanks.

BTW, this patch does not really solve the problem, it only prevents the actual ugly vertical override.

Maybe we could try some other way like adding a horizontal moving separator between subjects and lines in addition to this truncation, thus one could resize at will the subject bar to whatever he needs if the default width does not fit his need.

#34 Updated by Etienne Massip almost 7 years ago

There are leads here or here.

#35 Updated by Pieter Nicolai almost 7 years ago

Well the patch does makes the html view consistent with the pdf view.

A moving separator seems a bit over the top solution to only show the issue name. Actually, I like your previous suggestion of showing a tooltip with the full issue name.

#36 Updated by Etienne Massip almost 7 years ago

Pieter Nicolai wrote:

A moving separator seems a bit over the top solution to only show the issue name.

I was also thinking about the possibility later on to add columns to the subjects bar.

#37 Updated by Pieter Nicolai over 6 years ago

I added tooltips for each gantt subject which show the full title. See attached patch.

All tests pass. Hope this can get included in 1.1.2 since this issue is what is holding us back updating Redmine to 1.1.x at our company.

#38 Updated by Etienne Massip over 6 years ago

Nice.

You should replace the to_s_with_project in source:/trunk/lib/redmine/helpers/gantt.rb with something like the result of format_version_name() in source:/trunk/app/helpers/application_helper.rb#L176

#39 Updated by Jean-Philippe Lang over 6 years ago

  • Subject changed from Issues subjects are truncated in Gantt to Issues subjects wrap in Gantt

I've fixed text wraping issue in r4913 based on Etienne's patch.
Full issue subject added as title in r4914.

#40 Updated by Jean-Philippe Lang over 6 years ago

  • Target version set to 1.1.2
  • Resolution set to Fixed

#41 Updated by Etienne Massip over 6 years ago

I'd test it with IE6 as applying style directly to div instead of span (white-space and text-overflow) didn't work previously (see note 16).

#42 Updated by Etienne Massip over 6 years ago

As feared, new rendering of the Gantt with IE6 is very ugly :
  • no subject text for truncated subjects when the issue is assigned and using gravatar
  • else, subject text for truncated subjects is displayed over the issue icon

I think that CSS should be move out from the page to the stylesheet, firstly because it's bad habit to repeat style with the style attribute and secondly because that would lighten the html when rendering a lot of issues in the Gantt.

Plus : why not truncate the version and project subjects too ?

#43 Updated by Etienne Massip over 6 years ago

  • Status changed from Reopened to 7

#44 Updated by Etienne Massip over 6 years ago

Sorry, couldn't reopen the issue (#7678) :/

#45 Updated by Jean-Philippe Lang over 6 years ago

Etienne Massip wrote:

As feared, new rendering of the Gantt with IE6 is very ugly :

Maybe replacing the div in #html_subject with a span would make IE6 happy? Can you give a try?

I think that CSS should be move out from the page to the stylesheet, firstly because it's bad habit to repeat style with the style attribute and secondly because that would lighten the html when rendering a lot of issues in the Gantt.

Done in r4916.

Plus : why not truncate the version and project subjects too ?

They are truncated. Do you mean adding a title to the div?

#46 Updated by Etienne Massip over 6 years ago

Jean-Philippe Lang wrote:

Etienne Massip wrote:

As feared, new rendering of the Gantt with IE6 is very ugly :

Maybe replacing the div in #html_subject with a span would make IE6 happy? Can you give a try?

Plus : why not truncate the version and project subjects too ?

IE6 is very thought to satisfy, I think I've already try this trick ; I'll try again and tell you back.

They are truncated. Do you mean adding a title to the div?

Ok, maybe should I put my glasses on...adding the title would be nice also.

#47 Updated by Etienne Massip over 6 years ago

Still ugly.

You should be able to reproduce this behavior with IE by switching document mode to IE7.

I made a LOT of tries with css / html and the only configuration finally doing fine is the one I included with the patch.

#48 Updated by Chris Darts over 6 years ago

I've just applied this patch with v1.1.1 and it works fine. I also use the patch from #2024 and there seems to be no conflict with regards to the layout.

I've tested it in FireFox 3.6 and Chrome 9.0.597.9 on Ubuntu 10.10. Not tried IE I'm afraid.

Thanks for this great patch.

#49 Updated by Jean-Philippe Lang over 6 years ago

  • Status changed from 7 to Closed

r4913, r4914, r4916 merged in 1.1-stable.
We may open a specific issue for IE6 behaviour.

#50 Updated by Etienne Massip over 6 years ago

Are you sure ?

This is pretty regressive for IE6 users (and they are still numerous) if they use Gantt+avatars.

That would be nice to have it fixed too as we know there is a solution (at least one).

#51 Updated by Pieter Nicolai over 6 years ago

Now that Microsoft is even trying to kill IE6, see http://ie6countdown.com/ , I wonder if it still worth the effort to provide workarounds specific for IE6. Fact is that it is a 10 year old browser which doesn't follow web standards.

#52 Updated by Etienne Massip over 6 years ago

IE6 is far from being dead ; about 3.6 % as for Jan. 2011, which is more than Opera.

My company switched to IE8 only 2 months ago.

I think we should suport it.

#53 Updated by Ruben Kruiswijk over 6 years ago

Why are the gantt fixes made in the application.css and not in a separate css file? Custom themes/stylesheets are not getting updated this way. This doesn't apply to this issue only of course.

Also available in: Atom PDF