Image size error in IE9 using Bootstrap Theme

Image size error in IE9 using Bootstrap Theme

by Tracey Collins -
Number of replies: 17

Hi,

This is a copy of a message I posted in the Essential theme forum and a copy of the reply I received from Julian.

We have just installed Moodle 2.6 (Build: 20131224) and the Essential theme version 2.6.2 (Build: 20131202) on our test site and we are having a problem with the display of images in ie8, ie9 and ie10.

All images are displaying at their actual size rather than the size that is specified in the Appearance tab. For example, if the image is actually 200px x 200px, but has been set to display as 100px x 100px in the Appearance tab, the image will be displayed at the following sizes in the various browsers we have tested:

In ie8, ie9 and ie10 - 200px x 200px

In Firefox - 100px x 100px

In Chrome - 100px x 100px

In Safari - 100px x 100px

In ei11 - 100px x 100px

As our organisation cannot upgrade to ie11 due to other system incompatibilities, and the fact that many of our students will still be using these older versions of ie, is there any way for this to be fixed so that the images display at the correct size in these ie versions?

Thanks,

Tracey

Hi Tracey,

This is not an Essential bug but one with Bootstrap in general. You will find the same thing Happening in the Clean theme.

As such I do not have a fix to offer.

Julian

Does anyone have any suggestions how we can resolve this problem as we have many courses that are affected and manually resizing images will take many hours.

Thanks,

Tracey

Average of ratings: -
In reply to Tracey Collins

Re: Image size error in IE9 using Bootstrap Theme

by Mary Evans -
Wužiwarjo-wobraz wo Core developers Wužiwarjo-wobraz wo Documentation writers Wužiwarjo-wobraz wo Peer reviewers Wužiwarjo-wobraz wo Plugin developers Wužiwarjo-wobraz wo Testers

Hi Tracey,

When you say 'Appearance' tab, I am assuming that you are talking about the HTML editor, is that correct?

LittleBoo

Little-Boo

I am just testing this with an image I have uploaded here.
I want to see how IE9 renders this normally.

I'll be back shortly with my findings.

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Image size error in IE9 using Bootstrap Theme

by Julian Ridden -

I can confirm this bug and have seen it on many client sites. sad It is a bug within bootstrap itself that then impacts all bootstrap based themes.

A quick google search turns up lots of reports https://www.google.com/search?q=bootstrap+ie+no+image+resize&oq=bootstrap+ie+no+image+resize

Julian

Average of ratings: -
In reply to Julian Ridden

Re: Image size error in IE9 using Bootstrap Theme

by Mary Evans -
Wužiwarjo-wobraz wo Core developers Wužiwarjo-wobraz wo Documentation writers Wužiwarjo-wobraz wo Peer reviewers Wužiwarjo-wobraz wo Plugin developers Wužiwarjo-wobraz wo Testers

https://github.com/twbs/bootstrap/issues/7751

It's been removed from Bootstrap 3 and should be removed from Bootstrapbase too as this is not acceptable

Apparently is the img { width: auto/9;) setting that breaks the width/height attributes in IE.

Can we get this sorted in Moodle Bootstrapbase?

Average of ratings: -
In reply to Mary Evans

Re: Image size error in IE9 using Bootstrap Theme

by Rebecca Trynes -

Do you know if this has been fixed for bootstrapbase? Just wondering if I need to work something out in my theme or if updating bootstrapbase will do it for me.

Average of ratings: -
In reply to Mary Evans

Re: Image size error in IE9 using Bootstrap Theme

by Tracey Collins -

Hi Mary,

Yes I am talking about the Appearance tab in the HTML editor.

Thanks for looking into this for us.

Tracey

Average of ratings: -
In reply to Tracey Collins

Re: Image size error in IE9 using Bootstrap Theme

by Tom Moseley -
Does anyone know if this issue is still unavoidable? It's happening in our installation of Essential theme and i need a fix for it.

Thanks
Average of ratings: -
In reply to Tom Moseley

Re: Image size error in IE9 using Bootstrap Theme

by Mary Evans -
Wužiwarjo-wobraz wo Core developers Wužiwarjo-wobraz wo Documentation writers Wužiwarjo-wobraz wo Peer reviewers Wužiwarjo-wobraz wo Plugin developers Wužiwarjo-wobraz wo Testers

I'm trying to find what is still causing this problem and not getting very far!

Average of ratings: -
In reply to Mary Evans

Re: Image size error in IE9 using Bootstrap Theme

by Gareth J Barnard -
Wužiwarjo-wobraz wo Core developers Wužiwarjo-wobraz wo Particularly helpful Moodlers Wužiwarjo-wobraz wo Plugin developers

Hi Mary,

So has the img { width: auto/9;) been removed / overridden in core?

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Image size error in IE9 using Bootstrap Theme

by Mary Evans -
Wužiwarjo-wobraz wo Core developers Wužiwarjo-wobraz wo Documentation writers Wužiwarjo-wobraz wo Peer reviewers Wužiwarjo-wobraz wo Plugin developers Wužiwarjo-wobraz wo Testers

It looks to have been I just did a grep in current master/and stable branches and appears to have vanished.

Average of ratings: -
In reply to Mary Evans

Re: Image size error in IE9 using Bootstrap Theme

by Tom Moseley -

Would we have to wait for a new version of essential theme to come out or would we be able to fix it another way?

Cheers

Average of ratings: -
In reply to Tom Moseley

Re: Image size error in IE9 using Bootstrap Theme

by Mary Evans -
Wužiwarjo-wobraz wo Core developers Wužiwarjo-wobraz wo Documentation writers Wužiwarjo-wobraz wo Peer reviewers Wužiwarjo-wobraz wo Plugin developers Wužiwarjo-wobraz wo Testers

The problem was in Moodle but has been fixed so you will need to update to latest stable version of Moodle and Purge all cache.

Average of ratings: -
In reply to Mary Evans

Re: Image size error in IE9 using Bootstrap Theme

by Richard Clay -

Hi Mary

This image size issue seems to be a problem in IE9, IE10 affects the Clean theme. We're in a position where we use an external host and cannot upgrade to 2.7 anytime soon. Do you know if there is a fix that can be applied to the 2.6 version of "bootstrapbase"?

Thanks

Richard 

Average of ratings: -
In reply to Richard Clay

Re: Image size error in IE9 using Bootstrap Theme

by Richard Clay -

Actually I think I've found where to make the fix to 2.6 myself and the process is outlined below in case it helps anyone else.

  • Locate the CSS files "editor.css" and "moodle.css" in "theme/bootstrapbase/style" 
  • Search for the CSS declaration "width:auto\9" and comment out the declarations found. There is one in each of the above named CSS files.
  • Upload the changes to the theme and purge all caches.

I'm hoping there are no knock on negative effects associated with this change. 


Cheers
Richard

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

Re: Image size error in IE9 using Bootstrap Theme

by Mary Evans -
Wužiwarjo-wobraz wo Core developers Wužiwarjo-wobraz wo Documentation writers Wužiwarjo-wobraz wo Peer reviewers Wužiwarjo-wobraz wo Plugin developers Wužiwarjo-wobraz wo Testers

That sounds to have fixed it. When you upgrade, and depending on how you upgrade, I suppose you add a new version of moodle and archive the old? Whatever, you do there should be no problems.

Cheers

Mary

Average of ratings: -
In reply to Richard Clay

Re: Image size error in IE9 using Bootstrap Theme

by Peter Jonker -

Richard,

We applied your fix in Bootstrapbase which is our base theme for a custom one. However still having the problem in IE9. Do you have any suggestions?

Peter

Average of ratings: -
In reply to Peter Jonker

Re: Image size error in IE9 using Bootstrap Theme

by Mary Evans -
Wužiwarjo-wobraz wo Core developers Wužiwarjo-wobraz wo Documentation writers Wužiwarjo-wobraz wo Peer reviewers Wužiwarjo-wobraz wo Plugin developers Wužiwarjo-wobraz wo Testers

Depending on how your custom theme is built, it may well be in the your custom theme too.

Have you looked?

Mary

Average of ratings: -