Bug in Bootstrap Implementation?

Bug in Bootstrap Implementation?

by Mat Cannings -
Number of replies: 8

I have noticed what seems to be a bug in the Moodle implementation of Bootstrap and just wondered if anyone else is experiencing the same issue.

When I have a dropdown menu in the navbar at the top of the screen it seems that the menu only opens when I click on the text part of the navigation and not on the "caret".

In the code sample below if I click on the <i> or <b> elements of the link the dropdown does not open, it only opens if I click on the "My Dashboard" text. In testing if I surround "My" with a span or other html element it will also not trigger the dropdown. 

<li class="dropdown"><a href="http://localhost/moodle/my/index.php" class="dropdown-toggle" data-toggle="dropdown" title="My Dashboard"><i class="fa fa-dashboard"></i>My Dashboard<b class="caret"></b></a><ul class="dropdown-menu"><li>...</li></ul></li>

In testing it appears that the class called open is appended after the dropdown class on the li element and removed again immediately when clicking on the <i> or <b> but just toggles correctly clicking on the text. 

If I go to http://getbootstrap.com/ and try there the whole of the dropdown will trigger the opening of the menu.

I have tested this on a couple of sites using Moodle 2.7 with the themes Clean, More, Essential and Aardvark.

N.B. I have removed all of the YUI ID elements from the code to make it more legible

Average of ratings: -
In reply to Mat Cannings

Re: Bug in Bootstrap Implementation?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

It's the YUI version of the jQuery toggle that makes it so 'clunky', but it not a 'bug' it is just the product of the design. You see we cannot use jQuery in Moodle core themes.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Bug in Bootstrap Implementation?

by Mat Cannings -

Hi Mary,

So rather than a Moodle bug it is with the YUI implementation of Bootstrap then? It is a shame as it makes it difficult to do some of the things I was planning on my theme.

I have recorded a screencast of the issue in case my description was too hard to follow.



MattC

Average of ratings: -
In reply to Mat Cannings

Re: Bug in Bootstrap Implementation?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Matt,

I found that the issue can happen when both the YUI and jQuery versions are loaded at the same time.  So as the current master branch of the V3 version has gone to YUI, my Shoehorn child which uses jQuery has this: https://github.com/gjb2048/moodle-theme_shoehorn/blob/master/config.php#L74-L78

Cheers,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Bug in Bootstrap Implementation?

by Mat Cannings -

Thanks Gareth,

I think I will go down that root as a couple of things that I wanted to do with the navigation, particularly on mobile screen sizes, are affected by the issue.

Matthew Cannings

Average of ratings: -
In reply to Mat Cannings

Re: Bug in Bootstrap Implementation?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Matt,
The real culprit is this fellow...found in theme/bootstrapbase/renderers/core_renderer.php

            if ($level == 1) {
                $content .= '<b class="caret"></b>';
            }

There should be a space before the <b class="caret"></b> like so...

            if ($level == 1) {
                $content .= '&nbsp; <b class="caret"></b>';
            }

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Bug in Bootstrap Implementation?

by Mat Cannings -

Hi Mary,

Unfortunately that did not resolve the problem. It did however make the text part that does work a non-breaking space width bigger smile

I have managed to get it to work using Jquery that Gareth directed me to. 

Thanks all for your help.

MattC

Average of ratings: -
In reply to Mat Cannings

Re: Bug in Bootstrap Implementation?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The jQuery is the magic! Tghe icing on the cake.  I was just telling you about the aesthetics! smile

Average of ratings: -
In reply to Mat Cannings

Re: Bug in Bootstrap Implementation?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You can use jQuery in a custom theme...but we cannot if we are fixing Moodle Core files. If we could we would have fixed it! Lol

Average of ratings: -