Defect #21775: Field "Done" from issue subtasks table overlaps the layout in responsive mode, width 400 - Redmine

Defect #21775

Field "Done" from issue subtasks table overlaps the layout in responsive mode, width 400

Added by Marius BALTEANU over 5 years ago. Updated over 5 years ago.

Status:

Closed

Start date:

Priority:

Normal

Due date:

Assignee:

Jean-Philippe Lang

% Done:

Category:

UI - Responsive

Target version:

3.2.1

Resolution:

Fixed

Affected version:

3.2.0

Description

Steps to reproduce:

Open an issue with subtasks
Resize the browser to the minimum width (400px in my case, Chrome, latest version)
Observe the field Done that overlaps the layout.

I checked also the issues listing (project/issues) and there the problem doesn't reproduce because of the div "autoscroll" that makes that block scrollable also on horizontal.

Attached is a patch that adds that div for issue subtasks and relations.

After I applied the patch:

after.png (83 KB) Marius BALTEANU, 2016-01-21 00:17

before.png (82.5 KB) Marius BALTEANU, 2016-01-21 00:17

add_autoscroll_div.patch (1.64 KB) Marius BALTEANU, 2016-01-21 00:33

0001-Add-responsive-behaviour-to-subtasks-and-related-iss.patch (2.03 KB) Felix Gliesche, 2016-01-21 16:52

after-patch.png (74.1 KB) Felix Gliesche, 2016-01-21 16:53

Related issues

Associated revisions

Revision 15200
Added by Jean-Philippe Lang over 5 years ago

Add responsive behaviour to subtasks and related issues (#21775).

Patch by Felix Gliesche.

Revision 15201
Added by Jean-Philippe Lang over 5 years ago

Merged r15200 (#21775).

History

#1 Updated by Marius BALTEANU over 5 years ago

File add_autoscroll_div.patch added

Attached the patch.

#2 Updated by Jan from Planio www.plan.io over 5 years ago

Category changed from UI to UI - Responsive

Thanks for reporting this and providing a patch.

I am not sure scrolling is the best approach here. Ideally, we'd rearrange the elements so they all fit on the screen without scrolling.

#3 Updated by Jan from Planio www.plan.io over 5 years ago

I've also added a new category for responsive issues as I would expect to see a few more of those in the future. Using a different category will hopefully make it easier for Felix and me to address them quickly.

#4 Updated by Marius BALTEANU over 5 years ago

Jan from Planio www.plan.io wrote:

I am not sure scrolling is the best approach here. Ideally, we'd rearrange the elements so they all fit on the screen without scrolling.

I added the autoscroll div from two reasons:

this is the behavior used in the issues page
is a quick fix

I totally agree with you that is not the best approach and I think that the new responsive approach should apply in all pages where the issues are listed (Issues, issue show, my page)

#5 Updated by Felix Gliesche over 5 years ago

File 0001-Add-responsive-behaviour-to-subtasks-and-related-iss.patch added
File after-patch.png added

I have been working on a solution which avoids scrollbars and lets the columns stack so that each issue displays in two rows :

The screenshot shows how it looks on an iPhone 4 with 320px width (what I consider the minimum resolution width). It looks well for subtasks and related issues. The subject spans over the full width, whereas status, asignee, progress, start_date and end_date use one-third of the available width. I also added text-overflow:ellipsis to the table cells in case the content exceeds the table cell's space.