Sidebar Problem
A Guide to Using MediaWiki in a Hosted Environment
An instructional website by the developer of mh370wiki.net - a MediaWiki site about Malaysia Airlines Flight MH370.
On the current website the Sidebar is formatted by the Extension:CollapsibleVector which enables the drop-down menus.
Problem Definition
The capture below enables the problem to be visualised:-
- Menu items with long names do not fit on one line, the text is wrapped.
- The sub-menu list is indented too far to the right. The left margin is too great.
- This applies to all sub-menu lists, not just the one captured.
Investigation
Use Firefox Web Developer Tools to see how the sub-menu is formatted, as captured below:-
The Navigation Menu is contained within a panel. Each menu has its' own heading. The focus here is on the expanded section with vector-menu-heading-label = Roles.
The drop-down sub-menu is an unordered list vector-menu-content-list.
Each list item, for example Systems Administrator, is shown with the associated link, for example /Systems Administrator Role and the class is mw-list-item.
The list container is vector-menu-content.
The CSS is shown here:-
The margins are all 0px except for margin-left which is 1.25em.
Solution
Reduce the left margin for the container, vector-menu-content, to zero.
The following was added to MediaWiki:Vector.css but had no effect:-
.vector-menu-content { margin-left: 0px; }
Adding the full chain of classes to MediaWiki:Vector.css was effective:-
#mw-panel.collapsible-nav .portal .vector-menu-content { margin-left: 0px; }
However, a long menu label such as Systems Administrator and Interface Administrator take up all the available width.
The menu is contained within mw-panel which has a defined with of 10em.
