Defect #29694


Some buttons in wiki toolbar are hidden in responsive layout

Added by Go MAEDA over 5 years ago. Updated about 4 years ago.

UI - Responsive
Start date:
Due date:
% Done:


Estimated time:
Affected version:


#27758#note-8 by Marius BALTEANU:

on responsive mode, when the screen resolution width in less than the total width of the js toolbar (tabs + buttons), some buttons become hidden. I'm not happy with the current solution, but is not a blocker from my point of view and we can improve this later when we have a better solution.

#27758#note-53 by Takeshi Nakamura:

Toolbar buttons are not wrapped when the screen is narrow.

Redmine 4.0

Redmine 3.4


scrollable-css.patch (367 Bytes) scrollable-css.patch Takenori TAKAKI, 2020-01-31 08:36
scrollable-css.gif (300 KB) scrollable-css.gif Takenori TAKAKI, 2020-01-31 08:37
move-left-right-buttons.patch (1.65 KB) move-left-right-buttons.patch Takenori TAKAKI, 2020-01-31 08:39
move-left-right-buttons.png (71.6 KB) move-left-right-buttons.png Takenori TAKAKI, 2020-01-31 08:40
slack-popup-menu.png (23.3 KB) slack-popup-menu.png Go MAEDA, 2020-02-17 15:01
github_small.png (20.5 KB) github_small.png Bernhard Rohloff, 2020-02-17 17:23
github_wide.png (24.5 KB) github_wide.png Bernhard Rohloff, 2020-02-17 17:23

Related issues

Related to Redmine - Feature #27758: Adds preview option to the wiki toolbarClosedJean-Philippe Lang

Actions #1

Updated by Go MAEDA over 5 years ago

  • Related to Feature #27758: Adds preview option to the wiki toolbar added
Actions #2

Updated by Marius BĂLTEANU over 5 years ago

  • Assignee set to Marius BĂLTEANU
Actions #3

Updated by Takenori TAKAKI about 4 years ago

I made two patterns of patches to make wiki-toolbar scrollable.
Attach the patches with the screenshot.

(1) scrollable-css.patch
Add scroll setting with css to wiki-toolbar.

(2) move-left-right-buttons.patch
Add buttons to move the wiki-toolbar left and right like the setting screen.

Actions #4

Updated by Go MAEDA about 4 years ago

It may be one of the solutions to reduce buttons by implementing a context menu like Slack. In Slack, the menu is displayed when you select text. We can remove some buttons from the current toolbar with the popup menu.

Actions #5

Updated by Bernhard Rohloff about 4 years ago

Github also has an interesting solution for this issue. They simply put their toolbar under the tab if there's not enough space left next to it.

On wide screens the toolbar is next to the tabs.

On narrow screens it moves under the tabs in the input field area.


Also available in: Atom PDF