Bootstrap issues - Moodle 2.7

Bootstrap issues - Moodle 2.7

by Shaun Roskell -
Number of replies: 9

Hi All,


Quite new to these forums so I apologise if this is in the wrong thread, I've just upgraded to Moodle to 2.7 on our development site which was previously 2.5. On our Moodle site we have the student intranet as well and I've had to do tweaks to the code so it works well with bootstrap.

From what I read you could do a div with a class of "row-fluid" and inside that div have divs with a class of "span4" to layout content?

When I did this on 2.5 it worked perfectly but on 2.7 images and text overlay each other rather than shifting around when the browser is made smaller (if that makes sense). 

Screenshots below (excuse the colour, just hiding peoples faces) 

Now when viewing Moodle on a phone it works as expected, but on a tablet in landscape view the overlay as below is present.

Normal Browser Size


Smaller Browser



Is there something I am missing here?

And I apologise if its not the best explanation

Thanks, any help is greatly appreciated




Average of ratings: -
In reply to Shaun Roskell

Re: Bootstrap issues - Moodle 2.7

by Doug Moody -

Shaun,

Welcome to the forums. I am no expert on this, but your statement that it works on mobile but not a standard computer is a clue.

It has something to do with themes. A mobile device is detected by moodle and then moodle serves up the mobile theme. I don't know what changed between 2.5 and 2.7 in this regard to detecting themes, but its obvious something has changed.

I am curious if this problem runs across all browser flavors? Does it do this in Chrome, IE, and Firefox the same? If so, then the issue is probably in moodle. I know that I had a similar problem using Chrome and I simply reset the cache in my browser. Also, you can purge caches in moodle. I would try that first.

Let us know if you get it fixed.

Average of ratings: -
In reply to Shaun Roskell

Re: Bootstrap issues - Moodle 2.7

by Richard Oelmann -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Looks like the images themselves are a fixed size and need to have the img-responsive class added to them so that the images themselves resize - or ensure that overflow is hidden but that would cut the images off rather than resize them.

Average of ratings: -
In reply to Shaun Roskell

Re: Bootstrap issues - Moodle 2.7

by Mary Evans -

Hi Shaun,

Welcome to the Themes Forum! I understand perfectly what you are saying.

However it would be helpful to know what kind of theme you are using, for instance, is it a Bootstrapbase theme like 'Clean' or 'More' is it an older first generation Bootstrap theme that you downloaded as a Plugin theme? 

That said there have been some changes to the way images are styled in 2.7. You can read the discussion about that HERE. And here is the associated tracker issue number where changes were made. MDL-42195

Cheers

Mary

Average of ratings: -
In reply to Shaun Roskell

Re: Bootstrap issues - Moodle 2.7

by Shaun Roskell -

Thanks for the welcome and replies, will try to answer all the questions so far

As far as I was aware Doug it didn't detect whether you were using a mobile or computer it just detected screen/browser window size and adjusted accordingly, either way I've tested on most browsers and on both tablets and mobiles each with the same result, I've purged caches and reset cache in the browsers already as well.

Richard I already have a class set for the images of img-circle I should have probably mentioned that and didn't think you could have 2 classes, although I thought about the fixed width being an issue and wondered if setting the width by percentage rather than pixels would have any affect?... but previously with everything as it is before I upgraded to 2.7 these images would stack on top of each other when switching to a smaller browser/mobile phone. Although I know this isn't the best design, it's just something I've been messing with

Mary, I am using the clean theme, thanks will definitely take a look at that thread, although it involves images, I also get this with text too. It seems any thing on the same row will overlap and then when it gets to the full mobile size rather than say a mobile in landscape view, it will all stack as expected but landscape view or tablet size will overlap either text or images. 

I'll keep working on it to see what I can figure out, thanks for the help everyone




Average of ratings: -
In reply to Shaun Roskell

Re: Bootstrap issues - Moodle 2.7

by Mary Evans -

Hi Shaun,

The problem is that you perhaps never updated 2.5 when these same changes were backported. Otherwise this problem would have presented itself earlier.

This may sound silly but you could try to Purge all cache as this may clear the data that could be affecting the way things are displaying or just enable Theme Designer Mode and see if things work better.

Mary

Average of ratings: -
In reply to Mary Evans

Re: Bootstrap issues - Moodle 2.7

by Shaun Roskell -

Hi Mary,


Sorry, I'm not quite sure what you mean by these same changes were backported.

I've already done those things but no difference, it seems that the img-responsive class works perfectly, but the img-circle class does not do the same as it did in 2.5, it's not a massive deal as I could just make circle type images instead of using the class to do it and then set the class as img-responsive so I have a way round it but is weird how it's different in the 2 versions.


Appreciate your help, thanks



Average of ratings: -
In reply to Shaun Roskell

Re: Bootstrap issues - Moodle 2.7

by Mary Evans -

Well the .img-circle{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px} CSS is present in Moodle 2.7 but the fact that everything is overlapping something is not right.

I am just wondering now if the Atto text editor has re-arranged the divs, have you checked the page source using FireBug or some other Web developer tools?

Average of ratings: -
In reply to Shaun Roskell

Re: Bootstrap issues - Moodle 2.7

by Paul Nicholls -

Hi Shaun,

It sounds to me as though you've found that img-circle makes the images appear how you want them to, and img-responsive makes them fit properly - have you tried both together?  You can specify multiple CSS classes by separating them with a space - class="img-circle img-responsive" - which ought to do the trick if each does its own part in isolation. 

Average of ratings: -
In reply to Paul Nicholls

Re: Bootstrap issues - Moodle 2.7

by Shaun Roskell -

Wasn't even aware you could do that, guess you learn something new everyday.

This worked a treat for the images, adding the img-responsive class as well as the img-circle worked.

Thanks for this smile

Very strange the difference in behaviour between 2.7 and 2.5 though but glad it's sorted



Average of ratings: -