Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Perry Way -
Number of replies: 14

Hello everyone,

I'm working on new theme development on my new development machine. I've got code for Moodle 3.8.1+ running on three machines. My development laptop (works fine), a production server (works fine) and now on my new development machine it's not working right.

I thought maybe this was a browser cache problem so I cleared my cache. Nothing changed. I tried hitting my development machine from another machine and the same problem existed. So I'm sure that it's not a client-side issue resulting from bad caching.

I thought perhaps I corrupted something in the process of copying files. So I have literally re-installed everything several times (from source folder, from two different working sites, and fresh download) and it's still not working. I've gone to great effort to compare working directories from each machine to ensure I've got the latest code. I've even re-downloaded a fresh copy of Moodle 3.8.1+ the latest build and installed that from the ground up again. Still the same problem.

The issue seems to take place in the toggling of display:none to display:block for sections of HTML. I believe that this toggling is the nature of Bootstrap 4.0 as I use it in other sites I work on that aren't Moodle. The HTML is there, but the styles are not changing when you click on any of the menu dropdown links, notification drawer, user menu, and if you're on a page that has tabs, none of the tabs aside from the first one, do not work. 

Using Chrome, if you debug by viewing page source and alter the CSS to eliminate the display:none on a few classes you can see all the content of the entire tabbed page area, and then clicking on the tabs will take you to each of the settings. So it's a toggle issue. I believe the dropdown menu is also operating with a toggle capability. 

I've searched high and low through the forums here and found several other instances of others having the same exact problems. Some people saying the problem is with Boost theme. Well, I switched themes around and every theme I picked has the same problem. It's not a bug with my own theme code either because the identical code for the theme we are working with is my own and I've copied it literally from sites where it is known to work.

At this point I think I should mention also that I'm using PHP 7.4.3, MySql 8, Moodle 3.8.1+ (downloaded today), and we host our Moodles on Windows using IIS. That should pretty well describe the operating environments involved in case that's an issue. I am wondering if Moodle 3.8.1+ is known to work with PHP 7.4.3. I was not able to find anything saying that PHP needs to be lower than 7.4.3 but maybe since themes are compiled using PHP code, perhaps something in there is interfering with the javascript or CSS while it resets the theme cache. I suppose if I had endless amount of time I could solve this but I'm coming here hoping that this is a simple issue I can resolve by asking for help.

Here is a screen shot to show you where items are affected:

screenshot

Average of ratings: -
In reply to Perry Way

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Ken Task -
Picture of Particularly helpful Moodlers

First, you might kinda be on the 'bleeding edge' with PHP 7.4.3, MySql 8 but ...

Have sandbox sites from 3.4.highest all the way up to 3.8.1+ and make use of custommenu items in all the themes.  Noticed a strange behavior in 3.8.0 which continued until it just went away! ????

The custommenu items would not drop down *IF* one clicked on the Text or the arrow next to text (your FAQ's/Help) ... discovered I had to click just below the text/arrow for the menu to drop down!!! ????

In yours I wonder if the apostrophe is causing issue or the '/' as that would also be in a url ... like https://yoursite/admin/ area.

Something else observed ... when using admin/cli/cfg.php ... which is supposed to show all settings for the moodle, if I pipe that command via grep to limit what it shows:

php cfg.php |grep custommenu

I get only the first link in the custommenu ... can see the rest of them in config of appearance ... however, I do have several nested ...

Like:

Server Home|https://server/
Site Name Resources
-M35|https://server/moodle35/" "target=_new
-M36|https://server/moodle36/" "target=_new
-M37|https://server/moodle37/" "target=_new

They work, but I really don't know how they are working!

Anyway, after spending almost a full day at it ... had to go chase other varmits ... put it aside to revisit - today ... noticed I could click on the words!!!! ????? !!!!

Oh, the wonders of theming! :\  Enough to drive one to drink!!! :|

'SoS', Ken


Average of ratings: -
In reply to Perry Way

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
https://docs.moodle.org/dev/Moodle_3.8_release_notes#Server_requirements does not mention PHP 7.4.
Average of ratings: Useful (1)
In reply to Visvanath Ratnaweera

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Perry Way -
Thanks Visvanath, I guess I missed the fine print. I've downgraded now.
Average of ratings: -
In reply to Perry Way

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
MDL-66260

Downgrade that PHP...

Have you got your web server's Javascript console open while you're working on your theme?
Average of ratings: Useful (1)
In reply to Howard Miller

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Perry Way -
Hi Howard, I downgraded the PHP to 7.3.15 and the problem still exists. Actually the problem exists on all themes. Boost, and two other themes based on Boost. Also there is another default theme shipping with Moodle 3.8.1+ and that one also has the same problems. The problem is not some code that I introduced.

Can you explain what javascript would be running on the server? My impression is that the server side runs .php code only and javascript is client side only. How would I open a javascript console on the server? Curious how that works.

Thanks!
Average of ratings: -
In reply to Perry Way

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Perry Way -

Okay this is really strange stuff. I just downloaded a fresh copy of Moodle 3.8.1+ and installed it. 

It is having the same problem.

Dropdown menu, tab links, everything has the same behavior I posted about. This is with a completely fresh install, using defaulted Boost theme. When I install other themes, they also have the same behavior. It does not seem to be theme specific. If there's anything theme related it is in a general sense, not specifically related to one theme versus another.

Anyone have a clue how I can even diagnose the issue?  I've never had to debug bootstrap before but looks like maybe I might have to?


Average of ratings: -
In reply to Perry Way

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Ken Task -
Picture of Particularly helpful Moodlers

Again ... 2 cents ... moodle caches a bunch ... when working with themes (stock or addiitonal) a couple of things will make them look whonky or not function as they should (at least it was true in the past).

One item was theme edit mode left turned on.   Turn it off if it's on.

The other: caching ... in code/admin/cli/ run the purge_caches.php script.  From the admin GUI, purging caches one does have a specific options ... one being theme.

Gotten to the point where when ever I update or upgrade, the last thing I do before using the site is to purge caches.   Site will be slow at first while the cache builds up.

In some cases where purging via script or via admin GUI didn't seem to do the trick, manually erasing the contents of ... repeat ... contents of caching directories in moodledata ... cache, localcache, and muc.

Manually erasing leaves no doubt as to fresh or not.

Not sure about Windows platform, but in Linux sometimes a combo of things + having xdebug php extension loading caused issues.

Unloading of xdebug (restarting apache after) one would see only php-cli and Zend opcache.  And things seem to 'fly right' then.

'SoS', Ken



Average of ratings: -
In reply to Ken Task

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Perry Way -

Hi Ken,

Thanks for attempting to help but I think you missed what I said about starting fresh.

Also, refreshing cache doesn't do anything helpful in this case.


Average of ratings: -
In reply to Perry Way

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Hi

So you have three Moodle instances, only one has this problem. These three are on three different machines, all Windows Server IIS, right? Are they otherwise identical?

Know nothing of Windows, in the Linux/Apache world there are settings like the slash arguments, mod_security. Any such differences in the IIS configurations?
Average of ratings: -
In reply to Visvanath Ratnaweera

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Perry Way -

Hello Visvanath,

Almost correct. I have three machines, only one has this problem. All are running IIS, and otherwise identical with exception being that the latest one, the one with the problem, is running PHP 7.3.15 and the two other machines are running 7.3.14 and 7.3.12. 

One machine is a production server with many instances. Its PHP settings are set to log exceptions to the Windows Event Log but not to show debug information.

Two machines are development machines. One, my old laptop, that works fine. New development machine is the one with the problem. Both development machines are set up to show debug messages.

After my last post yesterday I discovered that Bootstrap is simply a very large .css file. And while Moodle does not link to it, it appears that all the pieces of Bootstrap have been dissected and organized in some .scss manner. Perhaps this was done to provide custom values without overbloating the .scss bloat by redeclaring a lot of classes with slight modifications. But, at this moment, what appears to not be working correctly in Bootstrap related classes pertains to toggling the visibility of sections of html.

I think at this point I'm going to start completely fresh including a new database, I have been working with an old MySQL backup that has a lot of courses and accounts and such in it so I can do lots of testing while developing. But I can start completely fresh meaning even the database, and don't update it with all the other reports and modules, just a basic installation from scratch, and plan on doing that today, soon as I finish all the morning chores here.

Average of ratings: -
In reply to Perry Way

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Perry Way -
I found the cause of the problem. It was nothing to do with .css or javascript or php code. It was IIS processing requests and leaving off the "slash arguments". Apparently I need to wear my glasses more often since I missed setting up the *.php handler to use the right setting. That was all that was wrong. Once I fixed that, everything worked like a charm. Thanks for everyone's time.
Average of ratings: Useful (1)
In reply to Perry Way

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Eric Lin -
Perry, think I am experiencing the same problems as you are having. I read down this thread, and I was wodnering if you could share more details about how you did this fix. I see you investigated a lot of things here, I hope I can learn from your experience here. I just installed 3.8.3, and the symptoms you describe match what I'm experiencing.
Average of ratings: -
In reply to Eric Lin

Re: Moodle 3.8.1+ Tabs and Menu links not working (bootstrap toggle issue?)

by Luis de Vasconcelos -
Are you using IIS? If so, check that IIS is configured to use the FastCGI handler to process all requests for .php files. The FastCGI handler should be configured to use the php-cgi.exe executable.
Average of ratings: -