Using Bootstrap 4 components with Boost

Using Bootstrap 4 components with Boost

by Bob Heckmann -
Number of replies: 9

I posted this question in the Developer forum but just got a single response, which provided insight but not a solution. Posting here as it might be the more appropriate forum.

I'm running MDL 3.31 with the Boost theme. I've entered html directly in the description field for one of my course categories, which consists of three Bootstrap 4 Collapse blocks. 

Everything works as expected outside of Mdl (i.e. when the page is served via it's URL - www.domain.com/filename.html) but when when I click the accordion buttons on the version running in Mdl the "collapsible" behavior doesn't work as expected. The native behavior for the component is when a button is clicked any other open cards in that accordion set collapse so only one card is open at a time. In Mdl, open cards don't collapse when subsequent buttons are clicked.

Am I correct to assume the code should word the same in Mdl as it does on a regular html page or is that not the case?

Thanks,

Bob


Average of ratings: -
In reply to Bob Heckmann

Re: Using Bootstrap 4 components with Boost

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

Hi Bob,

With reference to https://moodle.org/mod/forum/discuss.php?d=365441 and MDL-56511.  Moodle currently ships with development (Alpha version) Bootstrap code (v4 Alpha) which has bugs, one of which is that the collapsible behaviour in accordions where only one is open at any one time does not work.

Therefore either:

G

P.S. With my moderators hat on, please don't cross post the same thing, but instead on the other forum mention the problem and post a link to the original post.  Please read 'Post your question in one forum only' on https://moodle.org/mod/page/view.php?id=7080.

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

Re: Using Bootstrap 4 components with Boost

by Bob Heckmann -

Thanks for the information Gareth. Is there a target date for Moodle shipping with the latest Bootstrap 4 code?

Best,

Bob

Average of ratings: -
In reply to Bob Heckmann

Re: Using Bootstrap 4 components with Boost

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

Hi Bob,

If I was that good at predictions then I could win the lottery, so no I don't know of a target date.

Typically if classified as a bug and a patch is in place then takes about three weeks.  If classified as an enhancement and a patch is in place and before the code freeze, then M3.5 in May, otherwise could be M3.6 in November or later.

Best solution time wise is a 'do it yourself child theme' one.

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Using Bootstrap 4 components with Boost

by Bob Heckmann -

Thanks Gareth. Much appreciated. 

A final request: Your earlier post advised "turn off the parent JS" in the child theme. Please advise which file includes it as I haven't been able to locate it.

Many thanks,

Bob

Average of ratings: -
In reply to Bob Heckmann

Re: Using Bootstrap 4 components with Boost

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

Hi Bob,

i.e. https://github.com/moodle/moodle/blob/MOODLE_34_STABLE/theme/boost/templates/columns2.mustache#L125

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Using Bootstrap 4 components with Boost

by Bob Heckmann -

Thanks so much for the assistance Gareth. Previously, multiple accordions would stay open simultaneously rather than the most recently selected being open and the others collapsed. Now, an accordion opens and immediately collapses. The net result is the content in this Collapse component is inaccessible.

I've taken the following steps :

  1. removed the require js statements from columns1.mustache and columns2.mustache, per your previous post.
  2. added jQuery-3.2.1.slim.min.js, popper.min.js, bootstrap.min.js to the bottom of the <body> section, per Bootstrap's recommendation. I used the Add Additional HTML feature in the admin panel to do this and see the lines are inserted in the footer section of each page

I'm guessing there is another way Bootstrap is being loaded by default but I don't know.

Thanks in advance for additional suggestions.

Bob

Average of ratings: -
In reply to Bob Heckmann

Re: Using Bootstrap 4 components with Boost

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Bob,

If you can install the Generico filter, it comes with both accordion/accordion items, and tabs/tab items, bundles that both work with Moodle 3.3.1. I personally prefer to use tabs/tab items as they generally take up less vertical space on a page.

And, since I have Generico already installed, I can set up filters for many other things, too, such as greeting and referring to students personally by name just about anywhere I want to in a course, hiding massive amounts of info, such as a whole accordion set up, behind a single toggle button, etc.

Average of ratings: -
In reply to AL Rachels

Re: Using Bootstrap 4 components with Boost

by Bob Heckmann -

Thanks for the great suggestion Al. I chose the Boost theme for its Bootstrap 4 support and I'm standardizing around that framework's components for consistency in development and maintenance.

Best,

Bob

Average of ratings: -