Using bootstrap components in glossary

Using bootstrap components in glossary

by Agnieszka Herczak-Ciara -
Number of replies: 8

My theme give me an opportunities to use bootstrap components into moodle. Everything works fine on the frontpage and at course main page.
But when I use html code in glossary something goes wrong.  For example accordion doesn't work.
It looks like that a glossary cuts off some tags after saving text in editor.
I present my code below.

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Panel one</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
               Text one
            </div>
        </div>
    </div>
 
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Panel two
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
               Text two
            </div>
        </div>
    </div>
  </div>

After saving it loses all ids (id=accordion, id=collapseOne, id=collapseTwo).

How to resolve this problem?
Kindest regards,
Agnes


Average of ratings: -
In reply to Agnieszka Herczak-Ciara

Re: Using bootstrap components in glossary

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Agnes "But when I use html code in glossary something goes wrong."

Sorry, but I do not understand what that means. How do you do it exactly? Maybe you should post this to the Themes forum where more knowledgeable people can answer.

Joseph

Average of ratings: -
In reply to Joseph Rézeau

Odp: Re: Using bootstrap components in glossary

by Agnieszka Herczak-Ciara -

It doesn't concern my moodle theme, I think so.
I created a glossary and added a new entry. I added a text using atto editor.  It means that I wrote in editor's html window a code that I posted above. Because I wanted to  use  a javascript accordion to present a content in glossary.  I saved my entry and opened glossary to view this entry. The javascript's accordion didn't work.  But when I put the same code in a block for example on the frontpage everything works great.

Attachment kluczdostepu2.png
Average of ratings: -
In reply to Agnieszka Herczak-Ciara

Re: Odp: Re: Using bootstrap components in glossary

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi again,

You forgot to tell the whole story. This "accordion" feature only works with Moodle Themes based on Bootstrap 3. To make it work in an HTML block I had to download from the Moodle plugins the bootstrap theme and the shoehorn theme.

OK, now, accordion does work in a Page resource, in an HTML block. It does not work in Glossary, probably because the contents of Glossary definitions are "filtered" before being displayed.

Joseph

Average of ratings: Useful (1)
In reply to Joseph Rézeau

Odp: Re: Odp: Re: Using bootstrap components in glossary

by Agnieszka Herczak-Ciara -

Dear Joseph,

I'm sorry, I thought that it's obvious. I mentioned in post's subject about using bootstrap components. For me it was clear that using bootstrap components is only possible with bootstrap based theme.
Next time I'll try to be more precise in my posts.
I'm disappointed that entries in a glossary are filtered. I've observed that id attributes (selectors) disappear after saving an entry. All other CSS tags are visible in a page source.
Thank you for your response.

Average of ratings: -
In reply to Agnieszka Herczak-Ciara

Re: Odp: Re: Odp: Re: Using bootstrap components in glossary

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

The difference is that core moodle themes (ie Clean and More) are based on Boottrap2 with YUI versions of some/most of the javascript components of bootstrap, but not all. Several community themes, however, are built with Bootstrap3 and the full jquery components. They don't work the same with some components! Not all bootstrap themes are created equal smile

This is what makes the difference and makes it important to state what theme you are using, particularly when asking about bootstrap components and probably why Joseph originally suggested this may be a theme issue.

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Using bootstrap components in glossary

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Thanks for the clarification, Richard. This Bootstrap2 vs Bootstrap3 issue is most confusing.

For instance, in standard Moodle 2.7 distribution we have the Clean and the More themes, which are based on the Bootstrapbase theme (itself a Bootstrap version 2 brand) while in add-on themes we have e.g. the Shoehorn theme which is based on Bas Brand's Bootstrap theme (a Bootstrap version 3 brand).

Joseph mixed

Average of ratings: Useful (1)
In reply to Joseph Rézeau

Re: Using bootstrap components in glossary

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Yes, the decision was taken (at a higher level) to stick with Bootstrap2 in core at the time. Maybe the future will see core move to 3 (or 4 by then?) which many of the user contributed themes are now using.

But for right now - despite the news about YUI - plugins such as Bas' bootstrap3 theme using jquery are still unlikely to make their way directly into core, so unless someone can find ALL the bootstrap jquery as YUI ports, or that policy is eased with the moves around YUI, then we are still likely to get the issue with not all bootstrap components working with core themes. And beyond Moodle's implementation of Bootstrap - bootstrap itself is different between 2 and 3 and in some cases, even if the same component exists in both, the code/classes to use it is different.

What it does mean in practical terms, is that posters do need to specify the actual theme being used and not just 'its a bootstrap theme' in order to help others on the forum to provide the fullest answers.

Average of ratings: Useful (1)
In reply to Richard Oelmann

Odp: Re: Using bootstrap components in glossary

by Agnieszka Herczak-Ciara -

Ok, it's more complicated than I thought. But ... Is there any reason for filtering content in glossary?

Average of ratings: -