Anomalie #1799
closed
Cannot access tabs definition on some resolutions
Added by Johan Cwiklinski about 1 year ago. Updated about 1 year ago.
100%
Description
On some screen sizes, preferences tabs mays not all be visible:
On both examples, the last tab (Administrator) is missing.
Files
| clipboard-202403042152-8jbhs.png (141 KB) clipboard-202403042152-8jbhs.png | Johan Cwiklinski, 03/04/2024 09:52 PM | ||
| clipboard-202403042152-exevy.png (58.8 KB) clipboard-202403042152-exevy.png | Johan Cwiklinski, 03/04/2024 09:52 PM | ||
| fui-wrapping-menu.png (18.5 KB) fui-wrapping-menu.png | Guillaume AGNIERAY, 03/05/2024 12:13 PM | ||
| css-overflow-x.png (16.1 KB) css-overflow-x.png | Guillaume AGNIERAY, 03/05/2024 12:13 PM | ||
| stacked_tabs.png (73.4 KB) stacked_tabs.png | Guillaume AGNIERAY, 03/05/2024 02:55 PM |
Updated by Guillaume AGNIERAY about 1 year ago
- File fui-wrapping-menu.png fui-wrapping-menu.png added
- File css-overflow-x.png css-overflow-x.png added
Several possible solutions here :
- Using the
wrappingclass (https://fomantic-ui.com/collections/menu.html#wrapping)
- Using custom CSS to control overflow-x and enable an horizontal scrollbar
- Using javascript to display left/right buttons like in Redmine :
https://www.redmine.org/attachments/14182
Updated by Johan Cwiklinski about 1 year ago
Guillaume AGNIERAY a écrit (#note-1):
Several possible solutions here :
- Using the
wrappingclass (https://fomantic-ui.com/collections/menu.html#wrapping)- Using custom CSS to control overflow-x and enable an horizontal scrollbar
- Using javascript to display left/right buttons like in Redmine :
https://www.redmine.org/attachments/14182
Hum... Thaks for the feedback.
First solution is the most "FUI" one, but 2nd solution seems quite good also; if not too complex.
Redmine like solution would work, but for their usage, tabs are integrated in menu for small screens; which is not (and won't) the case for Galette. A vertical scroll or a 2 lines display will be more easy to use on mobile than small buttons I guess.
My two cents ;)
What would you prefer?
Updated by Guillaume AGNIERAY about 1 year ago
- File stacked_tabs.png stacked_tabs.png added
Johan Cwiklinski a écrit (#note-2):
First solution is the most "FUI" one, but 2nd solution seems quite good also; if not too complex.
The 1st solution would just need a class added in the template.
The 2nd solution would just need a few lines of CSS ;)
Redmine like solution would work, but for their usage, tabs are integrated in menu for small screens; which is not (and won't) the case for Galette. A vertical scroll or a 2 lines display will be more easy to use on mobile than small buttons I guess.
On mobile, with FUI, tabs are stacked :
My two cents ;)
What would you prefer?
I think the most accessible one is the first solution.
Updated by Johan Cwiklinski about 1 year ago
Guillaume AGNIERAY a écrit (#note-3):
I think the most accessible one is the first solution.
It's OK for me :)
Updated by Guillaume AGNIERAY about 1 year ago
- Status changed from Nouveau to Résolu
- % Done changed from 0 to 100
Appliqué par commit e6998fdb98ed458cdb9ba19aefbdfcad1bbd9d20.
Updated by Johan Cwiklinski about 1 year ago
- Category set to IHM
- Assignee set to Guillaume AGNIERAY
- Target version set to 1.1.0
Updated by Johan Cwiklinski about 1 year ago
- Target version changed from 1.1.0 to 1.0.4
Updated by Johan Cwiklinski about 1 year ago
- Status changed from Résolu to Fermé