[MGNLUI-300] Make column width in lists and trees adjustable Created: 30/Nov/12  Updated: 11/Feb/13  Resolved: 05/Dec/12

Status: Closed
Project: Magnolia UI
Component/s: design, tree/list, user interaction
Affects Version/s: None
Fix Version/s: 5.0

Type: Improvement Priority: Major
Reporter: Andreas Weder Assignee: Mikaël Geljić
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File column-resize-full-dotted.png     PNG File column-resize-full-solid.png     PNG File column-resize-small-dotted.png     PNG File column-resize-small-solid.png     PNG File column-resizer-double-dotted.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:

 Description   

Currently, we can't adjust the column width. There should be a fine vertical line acting as separator between two columns. Dragging that separator will adjust the column width between a minimum and a maximum width.

Unfortunately, there's currently no design for this and I've failed to order it in time. Please thus coordinate with me how this should look, once you're tweaking the visual appearance of this separator.



 Comments   
Comment by Mikaël Geljić [ 30/Nov/12 ]

Column resizing comes as standard in vaadin tables, they are simply hidden through CSS right now.

How about the following option?

  • display transparent with maximum size (3px*34px), cursor changes by default to horizontal resizer when hovering such element, so if one looks for resizing columns, she would expect to find the resizing handles there.
Comment by Andreas Weder [ 03/Dec/12 ]

I would expect, though, that we will have to introduce a vertical line eventually, since else it's much trial and error. I'd like to have a look at this with the visual designers, eventually.

Can we have a look at the enabled feature with resize cursor and a thin vertical line separating the headers?

Comment by Andreas Weder [ 03/Dec/12 ]

Added component to make it more filtering for changes easier.

Comment by Mikaël Geljić [ 03/Dec/12 ]

Here's a set of visual styles for these column separators/resizers.
Doesn't look that nice on the solid variants since we have quite many lines already that we cannot align together.
The dotted variant is a bit more subtle there.

Comment by Mikaël Geljić [ 03/Dec/12 ]

how about some double-dotted style? feels more like a grip then ^^

Comment by Andreas Weder [ 03/Dec/12 ]

Thanks a lot for the variants - that helps greatly in selecting a fitting design.

I think the dotted variants are best and I'd actually like to start small and go with the single dotted, small variant. I consider it clear enough to still be noticeable, but not too strong as to disrupt the design. For now, I don't see the need to use the double-dotted "grip" style, but I'd like to eventually test that.

Comment by Andreas Weder [ 07/Jan/13 ]

I'm afraid this now works perfectly. I'll thus have to close this issue Thx.

Generated at Mon Feb 12 08:35:32 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.