Issue with Menus (top level)

I have installed BlueSpice Free 4.4.1 (build:20240209132702)
This was installed on top of an existing MediaWiki installation (1.39.6)

We are using the BlueSpice Discovery 4.4.1 skin

I am viewing the Wiki with a variety of browsers (Chrome, Firefox, Safari) on MacOS Sonoma 14.3.1; all browsers exhibit the same issue.

The issues are related to the menus displayed when clicking the gear icon or the personal icon.

The menus items are arranged horizontally, not vertically, meaning that they scroll off the right side of the browser window instead of being stacked on top of each other.


Hi!

A few questions:

  • What screen resolution do you use?
  • Do you maybe have a zoom factor enabled in the browser?
  • Are there maybe CSS formatting rules on the page “MedaWiki:Common.css” that may collide with the skin? See also Manual:Interface/Stylesheets - MediaWiki

I have two monitors. One is 1080x1920 the other is 3440x1440

No zoom on any browser

The the best of my knowledge we have never touched the Common.css file. Is there anything in particular in that file that relates to how the menus are formatted I should double-check?

In a possibly related note, the Login link seems really really small. Can anyone confirm if this is displaying correctly or if it is also misformatted?

003_login_link_blue_spice

No, it should look like this:
image

You say

This was installed on top of an existing MediaWiki installation (1.39.6)

Maybe there is some other extension interfering with the styles. Can you please share the list of extensions/skins from Special:Version?

Yes, I have a massive number of things installed :slight_smile:

I have no manually activated Extensions; all of this is turned on by either BlueSpice or some other configuration setting outside of LocalSettings.php

Installed skins
Skin Version
BlueSpice Discovery 4.4.1
Vector 1.0.0
Special pages
Extension Version
CiteThisPage
Echo
FlexiSkin 2.1.1
InviteSignup 1.0.0+2021-09-01
Nuke
Renameuser
UserMerge 1.10.1
Editors
Extension Version
CodeEditor
VisualEditor 0.1.2
WikiEditor 0.5.3
Parser hooks
Extension Version
Arrays 2.2.1
CategoryTree
Cite
DynamicPageList3 3.5.1
EmbedVideo 3.2.8
ImageMap
ImageMapEdit 2.1.4
InputBox 0.3.0
Lingo 3.2.1
Loops 1.0.0-beta
ParserFunctions 1.6.1
RSS feed 2.25.1
SyntaxHighlight 2
TemplateStyles 1
UrlGetParameters 1.6.0
UserFunctions 2.8.1
Variables 2.5.3
Variables
Extension Version
Hit Counters 0.3.4
BlueSpice extensions
Extension Version
BlueSpiceAbout 4.4.1
BlueSpiceArticleInfo 4.4.1
BlueSpiceAuthors 4.4.1
BlueSpiceAvatars 4.4.1
BlueSpiceChecklist 4.4.1
BlueSpiceConfigManager 4.4.1
BlueSpiceContextMenu 4.4.1
BlueSpiceCountThings 4.4.1
BlueSpiceCustomMenu 4.4.1
BlueSpiceDashboards 4.4.1
BlueSpiceDistributionConnector 4.4.1
BlueSpiceEchoConnector 4.4.1
BlueSpiceEmoticons 4.4.1
BlueSpiceExtendedStatistics 4.4.1
BlueSpiceFoundation 4.4.1
BlueSpiceGroupManager 4.4.1
BlueSpiceHideTitle 4.4.1
BlueSpiceInsertCategory 4.4.1
BlueSpiceInsertFile 4.4.1
BlueSpiceInsertLink 4.4.1
BlueSpiceInstanceStatus 4.4.1
BlueSpiceInterWikiLinks 4.4.1
BlueSpiceNamespaceManager 4.4.1
BlueSpicePageAccess 4.4.1
BlueSpicePageAssignments 4.4.1
BlueSpicePagesVisited 4.4.1
BlueSpicePageTemplates 4.4.1
BlueSpicePermissionManager 4.4.1
BlueSpiceQrCode 4.4.1
BlueSpiceReaders 4.4.1
BlueSpiceRSSFeeder 4.4.1
BlueSpiceSaferEdit 4.4.1
BlueSpiceSmartList 4.4.1
BlueSpiceTagCloud 4.4.1
BlueSpiceUEModuleHTML 4.4.1
BlueSpiceUniversalExport 4.4.1
BlueSpiceUsageTracker 4.4.1
BlueSpiceUserManager 4.4.1
BlueSpiceUserSidebar 4.4.1
BlueSpiceVisualEditorConnector 4.4.1
BlueSpiceWatchList 4.4.1
BlueSpiceWhoIsOnline 4.4.1
BlueSpice assets
Extension Version
Twitter Bootstrap v5.3.2
Twitter Bootstrap Icons v1.10.3
Other
Extension Version
ContentDroplets 1.0.5
EnhancedUpload 2.0.5
ExtJSBase 3.0.5
FilterSpecialPages 2.0.5
FontAwesome 2.0.0
Gadgets
MenuEditor 2.0.5
OOJSPlus 2.0.5
PageHeader 2.1.1
Parsoid
StandardDialogs 2.0.5
TitleKey 1
TwoColConflict
VisualEditorPlus 1.0.1
Installed libraries
Library Version
bacon/bacon-qr-code 1.0.3
christian-riesen/base32 1.6.0
composer/installers 1.12.0
composer/semver 3.3.2
cssjanus/cssjanus 2.1.1
data-values/common 1.1.0
data-values/data-values 3.1.0
data-values/interfaces 1.0.0
data-values/validators 1.0.0
endroid/qr-code 2.5.1
ezimuel/guzzlestreams 3.1.0
ezimuel/ringphp 1.2.2
ezyang/htmlpurifier 4.17.0
guzzlehttp/guzzle 7.4.5
guzzlehttp/promises 1.5.3
guzzlehttp/psr7 2.4.5
jakobo/hotp-php 2.0.0
justinrainbow/json-schema 5.2.11
khanamiryan/qrcode-detector-decoder 1
liuggio/statsd-php-client 1.0.18
maennchen/zipstream-php 2.2.6
markbaker/complex 3.0.2
markbaker/matrix 3.0.1
monolog/monolog 2.2.0
mwstake/mediawiki-component-alertbanners 2.0.5
mwstake/mediawiki-component-commonuserinterface 4.0.0
mwstake/mediawiki-component-commonwebapis 2.0.11
mwstake/mediawiki-component-contentprovisioner 2.1.2
mwstake/mediawiki-component-datastore 1.0.5
mwstake/mediawiki-component-dynamicconfig 1.0.8
mwstake/mediawiki-component-formengine 2.0.13
mwstake/mediawiki-component-manifestregistry 2.1.3
mwstake/mediawiki-component-notifications 2.0.1
mwstake/mediawiki-component-runjobstrigger 2.0.1
mwstake/mediawiki-component-utils 2.0.4
mwstake/mediawiki-component-wikitext 6.0.1
mwstake/mediawiki-componentloader 1.0.0
mwstake/mediawiki-lib-nodes 1.0.6
myclabs/php-enum 1.8.4
oojs/oojs-ui 0.44.5
opensearch-project/opensearch-php 2.2.0
param-processor/param-processor 1.12.0
pear/console_getopt 1.4.3
pear/mail 1.5.1
pear/mail_mime 1.10.11
pear/net_smtp 1.10.0
pear/net_socket 1.2.2
pear/net_url2 2.2.2
pear/pear-core-minimal 1.10.14
pear/pear_exception 1.0.2
phpoffice/phpspreadsheet 1.29.0
pleonasm/bloom-filter 1.0.3
psr/container 1.1.1
psr/http-client 1.0.3
psr/http-factory 1.0.2
psr/http-message 1.0.1
psr/log 1.1.4
psr/simple-cache 1.0.1
ralouphie/getallheaders 3.0.3
react/promise 2.11.0
symfony/deprecation-contracts 2.5.2
symfony/options-resolver 2.8.52
symfony/polyfill-php80 1.28.0
symfony/polyfill-php81 1.28.0
symfony/polyfill-php82 1.28.0
symfony/polyfill-php83 1.28.0
symfony/property-access 2.8.52
symfony/yaml 5.4.23
wikimedia/assert 0.5.1
wikimedia/at-ease 2.1.0
wikimedia/base-convert 2.0.2
wikimedia/cdb 2.0.0
wikimedia/cldr-plural-rule-parser 2.0.0
wikimedia/common-passwords 0.4.0
wikimedia/composer-merge-plugin 2.0.1
wikimedia/css-sanitizer 4.0.1
wikimedia/html-formatter 4.0.3
wikimedia/idle-dom 1.0.0
wikimedia/ip-set 3.1.0
wikimedia/ip-utils 4.0.0
wikimedia/less.php 3.1.0
wikimedia/minify 2.3.0
wikimedia/normalized-exception 1.0.1
wikimedia/object-factory 4.0.0
wikimedia/parsoid 0.16.2
wikimedia/php-session-serializer 2.0.1
wikimedia/purtle 1.0.8
wikimedia/relpath 3.0.0
wikimedia/remex-html 3.0.3
wikimedia/request-timeout 1.2.0
wikimedia/running-stat 2.1.0
wikimedia/scoped-callback 4.0.0
wikimedia/services 3.0.0
wikimedia/shellbox 3.0.0
wikimedia/timestamp 4.1.1
wikimedia/utfnormal 3.0.2
wikimedia/wait-condition-loop 2.0.2
wikimedia/wikipeg 2.0.6
wikimedia/wrappedstring 4.0.1
wikimedia/xmp-reader 0.8.6
wikimedia/zest-css 2.0.2
zordius/lightncandy 1.2.6

Still trying to fix this issue. I upgraded to BlueSpice free 4.4.2; issue unresolved

When I tail error_log, I see these entries:

alderacw@alderacwiki.com [~/public_html/wiki]# tail error_log
[23-Mar-2024 21:09:05 Europe/Berlin] PHP Deprecated: Use of BaseTemplate::getTrail was deprecated in MediaWiki 1.39. [Called from BaseTemplate::printTrail in /home3/alderacw/public_html/wiki/includes/skins/BaseTemplate.php at line 437] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:05 Europe/Berlin] PHP Deprecated: Use of QuickTemplate::(get/html/text/haveData) with parameter bottomscripts was deprecated in MediaWiki 1.39. [Called from QuickTemplate::get in /home3/alderacw/public_html/wiki/includes/skins/QuickTemplate.php at line 144] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:07 Europe/Berlin] PHP Deprecated: Use of QuickTemplate::(get/html/text/haveData) with parameter headelement was deprecated in MediaWiki 1.39. [Called from QuickTemplate::html in /home3/alderacw/public_html/wiki/includes/skins/QuickTemplate.php at line 168] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:07 Europe/Berlin] PHP Deprecated: Use of BaseTemplate::printTrail was deprecated in MediaWiki 1.39. [Called from BlueSpice\Discovery\Template::execute in /home3/alderacw/public_html/wiki/skins/BlueSpiceDiscovery/src/Template.php at line 31] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:07 Europe/Berlin] PHP Deprecated: Use of BaseTemplate::getTrail was deprecated in MediaWiki 1.39. [Called from BaseTemplate::printTrail in /home3/alderacw/public_html/wiki/includes/skins/BaseTemplate.php at line 437] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:07 Europe/Berlin] PHP Deprecated: Use of QuickTemplate::(get/html/text/haveData) with parameter bottomscripts was deprecated in MediaWiki 1.39. [Called from QuickTemplate::get in /home3/alderacw/public_html/wiki/includes/skins/QuickTemplate.php at line 144] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:23 Europe/Berlin] PHP Deprecated: Use of QuickTemplate::(get/html/text/haveData) with parameter headelement was deprecated in MediaWiki 1.39. [Called from QuickTemplate::html in /home3/alderacw/public_html/wiki/includes/skins/QuickTemplate.php at line 168] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:23 Europe/Berlin] PHP Deprecated: Use of BaseTemplate::printTrail was deprecated in MediaWiki 1.39. [Called from BlueSpice\Discovery\Template::execute in /home3/alderacw/public_html/wiki/skins/BlueSpiceDiscovery/src/Template.php at line 31] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:23 Europe/Berlin] PHP Deprecated: Use of BaseTemplate::getTrail was deprecated in MediaWiki 1.39. [Called from BaseTemplate::printTrail in /home3/alderacw/public_html/wiki/includes/skins/BaseTemplate.php at line 437] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381
[23-Mar-2024 21:09:23 Europe/Berlin] PHP Deprecated: Use of QuickTemplate::(get/html/text/haveData) with parameter bottomscripts was deprecated in MediaWiki 1.39. [Called from QuickTemplate::get in /home3/alderacw/public_html/wiki/includes/skins/QuickTemplate.php at line 144] in /home3/alderacw/public_html/wiki/includes/debug/MWDebug.php on line 381

It appears that some of the PHP being called in bluespicediscovery was deprecated in MediaWiki 1.39. Could this be causing this problem?

This issue appears to be related to this problem:

https://phabricator.wikimedia.org/T306942

Minor update
When I visit Special:Preferences the top menu formats correctly and the drop down menus are also formatted correctly.

This appears to be the only page on the site that formatting works properly on.

Also, if I change the Skin to Vector (2020) the Vector skin renders correctly.

Thanks for providing the list of extensions. I can not see anything unusual.

Well, we know about T306942 and will fix this with the next minor release. For the current release it is just a deprecation and therefore should not cause any real issues.

Can you confirm that there are no error messages written to the output of the webserver? Not just when calling index.php but also in load.php which is responsible to deliver the styles.

Unfortunately I can not reproduce this. Maybe you can use the browser’s developer tools to identify the problematic (missing?) stylings, by comparing the situation on “Special:Preferences” with the one on another page?

Comparing my homepage to my Preferences special page, I note some differences.

The Preferences page has links in the first stylehseet href to:

Cmediawiki.helplink
Cmediawiki.htmlform.ooui.styles
Cmediawiki.htmlform.styles
Cmediawiki.special.preferences.styles.ooui
Cmediawiki.ui.checkbox%2Cinput%2Cradio
Cmediawiki.widgets.SelectWithInputWidget.styles
Cmediawiki.widgets.TagMultiselectWidget.styles
Cmediawiki.widgets.styles
Coojs-ui-core.icons%2Cstyles
Coojs-ui-widgets.styles
Coojs-ui.styles.indicators

These don’t appear in the Homepage stylesheet href.

The following

First, in the Preferences page, instead of ns-0 it uses ns-1.

Second, I think there’s a typo. Should this say bs-cusTom-menu-active? (Missing “t”. The same typo is on both pages.)

Hello,
take the login bar issue as an example, it seems that your <ul class="navbar-nav w-100 align-items-center"> element is not regarded as a flex container:
Find that element in your browser’s developer tools, inspect rules for that element. Normally you should see display: flex active under .navbar-nav:


To see if you have some conflicting styles loaded, use keyword “display” to filter styles. Locate and disable them if there is any.

I do see an issue with this rule:

If I am interpreting this correctly the higher-level .navbar ul style of display: inline; is overwriting the lower level .navbar-nav style of display: flex;

Since I have not edited any of this css, why is this happening?

Hi Ryan,

although I tried and could not find the unwanted style definition anywhere, there is still one workaround that should work:

please visit page MediaWiki:Common.css and insert these lines:

#nb-pri .navbar-nav {
	display: flex!important;
}

By using !important you are declaring a definition of highest priority, overwriting the existing unwanted one. Similarly you can compare the gear menu/personal menu behavior of your installation with e.g the official helpdesk installation, overwriting unwanted rules with Common.css.

Please use a forced refresh of your browser to take Common.css changes into effect, as there might be local caches.

AH HA!
Now we are getting somewhere.

My MediaWiki:Common.css is HUGE.

I found the section for the nav bar and it had all sorts of styles. I commented out that whole section to see what would happen and voila! The Nav Bar now looks as it should!

This wiki has been used for quite some time before we converted it to BlueSpice. I suspect that along the way various skins have added to the Common.css.

Is there any reference for a “clean” BlueSpice Common.css I could use to reset mine?