Defect #21775
closed
Field "Done" from issue subtasks table overlaps the layout in responsive mode, width 400
Added by Marius BĂLTEANU almost 10 years ago.
Updated almost 10 years ago.
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
- 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.
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.
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)
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.
- Status changed from New to Resolved
- Target version set to Candidate for next minor release
- Resolution set to Fixed
- Status changed from Resolved to New
- Target version changed from Candidate for next minor release to 3.2.1
- Resolution deleted (
Fixed)
Setting target version to 3.2.1.
Felix, thanks for working on many UI issues.
- Status changed from New to Closed
- Assignee set to Jean-Philippe Lang
- Resolution set to Fixed
- Related to Defect #32889: Responsive layout for issue tree and issue relation on issue page is broken added
Also available in: Atom
PDF
Updated by 
Updated by 
Updated by 
Updated by 
Updated by