Themes

Bootstrap issues - Moodle 2.7

 
 
Picture of Shaun Roskell
Bootstrap issues - Moodle 2.7
 

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: -
Picture of Doug Moody
Re: Bootstrap issues - Moodle 2.7
Group Particularly helpful Moodlers

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: -
Picture of Richard Oelmann
Re: Bootstrap issues - Moodle 2.7
Group DevelopersGroup Particularly helpful MoodlersGroup 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: -
It's only an avatar...
Re: Bootstrap issues - Moodle 2.7
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

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: -
Picture of Shaun Roskell
Re: Bootstrap issues - Moodle 2.7
 

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: -
It's only an avatar...
Re: Bootstrap issues - Moodle 2.7
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

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: -
Picture of Shaun Roskell
Re: Bootstrap issues - Moodle 2.7
 

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: -
It's only an avatar...
Re: Bootstrap issues - Moodle 2.7
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

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: -
Picture of Paul Nicholls
Re: Bootstrap issues - Moodle 2.7
Group DevelopersGroup Particularly helpful Moodlers

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: -
Picture of Shaun Roskell
Re: Bootstrap issues - Moodle 2.7
 

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: -