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

Actions

Copy link

Defect #21775

closed

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

Added by Marius BĂLTEANU almost 9 years ago. Updated almost 9 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Jean-Philippe Lang

Category:

UI - Responsive

Target version:

3.2.1

Start date:

Due date:

% Done:

Estimated time:

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:

Files

Download all files

after.png (83 KB) after.png		Marius BĂLTEANU, 2016-01-21 00:17
before.png (82.5 KB) before.png		Marius BĂLTEANU, 2016-01-21 00:17
add_autoscroll_div.patch (1.64 KB) add_autoscroll_div.patch		Marius BĂLTEANU, 2016-01-21 00:33
0001-Add-responsive-behaviour-to-subtasks-and-related-iss.patch (2.03 KB) 0001-Add-responsive-behaviour-to-subtasks-and-related-iss.patch		Felix Gliesche, 2016-01-21 16:52
after-patch.png (74.1 KB) after-patch.png		Felix Gliesche, 2016-01-21 16:53

Related issues

Actions

Copy link

Updated by Marius BĂLTEANU almost 9 years ago

File add_autoscroll_div.patch add_autoscroll_div.patch added

Attached the patch.

Actions

Copy link

Updated by Jan from Planio www.plan.io almost 9 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.

Actions

Copy link

Updated by Jan from Planio www.plan.io almost 9 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.

Actions

Copy link

Updated by Marius BĂLTEANU almost 9 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)

Actions

Copy link

Updated by Felix Gliesche almost 9 years ago

File 0001-Add-responsive-behaviour-to-subtasks-and-related-iss.patch 0001-Add-responsive-behaviour-to-subtasks-and-related-iss.patch added
File after-patch.png 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.

Actions

Copy link