Boost and BS4 Tabs

Boost and BS4 Tabs

by Derek Chirnside -
Number of replies: 19

At present, using Boost and Tabs code from this site http://v4-alpha.getbootstrap.com/components/navs/#tabs the tabs don't function.

Problems:

  • I get bullets ion the tabs
  • the tabs appear but are not clickable
  • Text in all tabs appears all at once.

I must be doing something wrong.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">To come</a>
    <p>Some text</p>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">To come</a>
    <p>Some text</p>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">To come</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">To come</a>
  </li>
</ul>

-Derek


Average of ratings: -
In reply to Derek Chirnside

Re: Boost and BS4 Tabs

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

Hi Derek,

Ok, what version of Moodle and theme are you using please?

Forum rules

Also if the tabs on: Dashboard -> Site administration -> Appearance -> Themes -> Boost are working then you must have done something wrong.

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Boost and BS4 Tabs

by Derek Chirnside -

I've had a look at this Dareth, and yes they are working there.  The vital piece of information I missed in the original post was that I was doing this in a label.

Maybe the processing of a label code is not working quite right.

Do you think the code I have used SHOULD work?

The code you inserted above in your button does not work properly for me.  The whole screen is dark.  Maybe I will try some other bootstrap elements like the accordian and see if I can get any of them to work.

Tx

Average of ratings: -
In reply to Derek Chirnside

Re: Boost and BS4 Tabs

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

Its the LABEL it's crap to say the least. Its ment to be a Label as in a tag or title, however its used as a box to add code that can r is supposed to do a million and one things. However if you look at the code behind it is is a mess and should be reworked and brought up to date.

I hate it ...its a pain.

Cheers

Mary

Average of ratings: -
In reply to Derek Chirnside

Re: Boost and BS4 Tabs

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

Hi Derek,

I would have thought that the tabs will work in a label, I'll have a go..... Edit, using the sample markup from http://v4-alpha.getbootstrap.com/components/navs/#tabs: - they do:

...
...
...
...


Edit 2 - well it does on a course label!


being:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>


the dots afterwards are all down (not label related) to some CSS in core somewhere:

.course-content li.section li.activity ul {
    list-style: disc;
}
.course-content li.section ul ul {
    list-style: circle;
}
.course-content li.section ul {
    list-style: disc;
}


Where removing one activates the next until you disable them all.  Would need to hunt around the code in Git to find the 'blame' and understand why its there.


The button (modal) I posted above goes dark because of a fault with the moodle.org site theme: MDLSITE-4887.

Cheers,

G

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

Re: Boost and BS4 Tabs

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

Can confirm it works in Boost and Waxed for me - will look at adding something around hiding those dots into waxed in the near future

Average of ratings: -
In reply to Richard Oelmann

Re: Boost and BS4 Tabs

by Derek Chirnside -

Gareth, thanks.  

You have used the "Using Data attributes" on the page http://v4-alpha.getbootstrap.com/components/navs/#tabs: and this works in both our dev site and demo.moodle.

The option I was using was the "Tabs" option.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
At present this still fails.  I have just tried it in demo.moodle and it is the same there.

The method you used is fine, but creates a maintaining headache, when you have to update much more code since there are three places where things are referenced rather than on, and they are in two separate parts of the code.

I have had a short holiday, and we hoped to upgrade soon, but this is doing my head in.

Advice needed.

No-one from the Boost coders has replied here.    I've had a look in the tracker.  There are 1140 tracker items with the word boost in them.  I can't even decide if this feature (being able to insert bootstrap 4 into the code view in a label) is intended (ie supported) or not.  It worked in Clean and Flexibase in 3.0.  But it is not working in Boost with Moodle 3.2.  At least not without foibles.

Is this worth a tracker item, or is there just too many other things going on?

I'm open to any possibilities to get in Moodle 3.2 what I currently have in 3.0 + Flexibase:

  • New course format.  I've checked the databse, there are four ready for 3.2, they all look nice, but none give inside the section navigation
  • Generico.  AL's suggestion.

I've appreciated your comments Gareth, and trying to think myself clear: maybe the question I am struggling with is deployment of content.  ie some text, some pictures, some embedded video and some links to various documents.  I'd like this chunked a little more fine grained than just "sections" with a scroll of content.  I've actually tried SCORM.  sad but this is non-responsive in Moodle as far as I can tell.  I'll be looking at the new iContent. https://moodle.org/mod/forum/discuss.php?d=335211 if it is available for 3.2


I might be trying to do too much too fast. It always takes a little bit of time to settle into something as new as Boost.

-Derek

Average of ratings: -
In reply to Derek Chirnside

Re: Boost and BS4 Tabs

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

Hi Derek,

No worries.  A quick reply on SCORM.  Perhaps its had its day and time for something new.

With the data-attributes thing, sometimes it needs a jQuery kick-start to make it work.  Or that might have been something else.

Cheers,

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Boost and BS4 Tabs

by Derek Chirnside -

re SCORM, maybe you are right.

Dan has this to say: https://moodle.org/mod/forum/discuss.php?d=344981#p1391254

SCORM is over 16 years old - before Ipads/smart-phones/mobile-learning/ wide adoption of WiFi and the design of the spec does not support mobile devices/offline capabilities - when you lose a connection (WiFi drops out/go through a tunnel) you will often lose data during communication with the LMS - some SCORM packaging tools try to support this but there is only so far you can go due to the design of the spec.

<snip>

SCORM will be here for a while, but if you aren't using it now, don't start - it's like going to the cell phone store and asking to purchase an Ericsson R380 but what you really should be getting is a Samsung Galaxy S8

I see a trend to people developing LMS specific content: iContent, H5P, moodle lesson/workshop/book etc where you build in Moodle.  Early days yet.

Thanks Gareth.

-Derek


Average of ratings: -
In reply to Derek Chirnside

Re: Boost and BS4 Tabs

by Damyon Wiese -

The examples on the bootstrap site without data-attributes all require triggering the behaviour with a chunk of javascript. Unless you call the javascript function somewhere you will get some of the styles but none of the extra functionality. (So it's easiest to stick to the data-attribute examples). 



Average of ratings: -
In reply to Damyon Wiese

Re: Boost and BS4 Tabs

by Derek Chirnside -

Damyon, thanks for this.  (And I apologise for getting your name wrong in the other post where I have quoted you here)

I will test the data attributes in demo.moodle.

Cheers,

-Derek

Average of ratings: -
In reply to Derek Chirnside

[Solved] Re: Boost and BS4 Tabs

by Derek Chirnside -

Success.  Got tabs working in Boost in a label.

  1. Damyon is right: you need to use the data driven version of BS4 navigation for this to work.  http://v4-alpha.getbootstrap.com/components/navs/#using-data-attributes.  Got a nice easy to use template for this.
  2. There is still a CSS error as Gareth pointed out, and you get tabs Plus bullet points on all but one of the tabs.

  3. Note: This whole thing will fail if you have filter HTML tidy present.
  4. AL said Generico with tabs works in Boost OK (below in this thread), but I could not get it to do so.

Thanks to all the help in this. Now to test BS4 accordions and I'm done for now.

-Derek

Average of ratings: -
In reply to Derek Chirnside

Re: Boost and BS4 Tabs

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

Looks to be working OK here. Using the original mark-up.

Yes you can see the Bullet points in the Editor but once saved they show up on the page then as they get styled with the CSS that's been generated by the theme.

Average of ratings: -
In reply to Mary Evans

Re: Boost and BS4 Tabs

by Derek Chirnside -
Ah. I've done this in my site, and a fail. So there is something different between Moodle.org and my site. Thanks Mary. -Derek
Average of ratings: -
In reply to Derek Chirnside

Re: Boost and BS4 Tabs

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

Where did you add them? Further more...how did you add them? Did you use a word processor?

Average of ratings: -
In reply to Mary Evans

Re: Boost and BS4 Tabs

by Derek Chirnside -

Here's the steps Mary.  

  1. Copy code
  2. Add label: using regular Atto editor
  3. Open to code view
  4. Paste in code
  5. Save
  6. Fail

This is the same process I used with Flexibase in Moodle 3.0.  I know it is a little fiddly, but there is no other way that I know of to get any navigation option inside a section.  It is also responsive on mobiles.

In general, I's look to using tabs and a few other bits like accordions.  It may be Mary that you are the first to post on this here: https://moodle.org/mod/forum/discuss.php?d=267662  At present I'm just looking for someone to say "Yes, it is working for me" (so I can figure out where our test site is faulty) or "No, looks like a bug":

Regards

-Derek

Average of ratings: -
In reply to Mary Evans

Re: Boost and BS4 Tabs

by Derek Chirnside -

I've just tested tabs in a label in demo.moodle and they fault even worse.  The tabs stack up and they are all visible at once and there is no shifting of the focus.

The code I used, based on http://v4-alpha.getbootstrap.com/components/navs/#tabs 

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link 1</a>
    <p>Test text fdg bdfgh dfghbdf ghb</p>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
    <p>Test text fdg bw4563456ghbdf ghb</p>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
    <p>Test text fdg sadfgsdfgdf ghb</p>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 4</a>
    <p>Test tafredgadfgv dafg adfgsa dfg4445567dfghbdf ghb</p>
  </li>
</ul>

To repoduce:

  1. Add a label
  2. Paste the code in code view
  3. Save
  4. Fail

Now I'm wondering if this is a problem with Atto?  I may post this in the general help forum.

-Derek


Average of ratings: -
In reply to Derek Chirnside

Re: Boost and BS4 Tabs

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

Hi Derek,

Have you thought about using the Generico filter to add tabs to your labels? They work as expected in every editable spot using Atto that I've tried, while using Boost theme in Moodle 3.2.

Tabs and Tabitems templates are two of the default bundles that come with the Generico filter plugin as well as widget bundles with PoodLL3.


Average of ratings: Useful (1)
In reply to AL Rachels

Re: Boost and BS4 Tabs

by Derek Chirnside -

AL, even better with Snippet.

See the post over here: https://moodle.org/mod/forum/discuss.php?d=345493#p1393593 with a small video.


Three clicks to add beautifully formatted BS4 tabs with no need to engage with the code view.  I will set this up so you have the choice of adding 3,4 or 5 tabs.  Justin has created a very useful tool.

-Derek

PS: the code in bold below fixes the bullet points in the tabs, which you can add to your theme CSS, courtesy of Bob.

<!-- Nav tabs -------------- -->
<ul style="list-style: outside none none;" class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-expanded="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-expanded="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-expanded="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab4" role="tab" aria-expanded="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -------------- -->
<div class="tab-content">
  <div class="tab-pane active" id="tab1" role="tabpanel" aria-expanded="true">
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
    dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
  </div>
  <div class="tab-pane" id="tab2" role="tabpanel" aria-expanded="false">
    Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.
  </div>
  <div class="tab-pane" id="tab3" role="tabpanel" aria-expanded="false">
    Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi
    rutabaga tigernut.
  </div>
  <div class="tab-pane" id="tab4" role="tabpanel" aria-expanded="false">
    Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane
    silver beet rock melon radish asparagus spinach.
  </div>
</div>


Average of ratings: -