Streaming live at 10am (PST)

Footer placement problem with flexbox in internet explorer


#1

Hi, I’m wondering if anyone can help me out with a specific issue in internet explorer that I believe is related to the flexbox layout I’m using.

This is the read only link for the site:

https://preview.webflow.com/preview/buildingbloqs2?preview=757c6ee2538691c4faba248ea1eb9cd0

It has been live for quite a long time and I have only just received a complaint about his issue but basically the footer, which should appear at the bottom (obviously), is on some pages showing just below the header, or in other weird places. The starkest example is on the /enquiry page:

I’ve tried playing with some adding some 100% height values on various elements based on a stack overflow thread I found but not had any luck so far. I’m aware that some people are happy not to support IE but I’m aware that there are still a lot of people using it. I’ve also seen the below threads and understand flexbox is not well supported, but I’m wondering what the best course of action for me is if I want this to work on IE - should I completely remove the flexbox layout? This is quite a big task with a site this size and also I implemented it initially because I had other issues, so I’d like to avoid that if possible!

TL;DR I’m wondering if anyone has found a workaround for this kind of problem, or if you have any suggestions I can try!


#2

Hey @joshuafry

Flexbox only has partial support in Internet Explorer. There are a lot of different bugs in IE.

You should check the “Known Issues” tab at can i use website because sometimes there’s a fix or workaround that can help you - https://caniuse.com/#search=flexbox


#3

Thanks @Filipa, I actually found something there that might have fixed it (though it’s hard for me to tell beyond using browserstack, which seems to change its mind a lot) - adding 100% height to the main flexbox appears to have had an effect at least - the bug being that I had a ‘min-height’ set there but no regular ‘height’.

Much appreciated


#4

You’re welcome Joshua :slightly_smiling_face:

I’ll have access to internet explorer tonight so if you are able to share your published link, I can check if the issue is fixed.


#5

That would be very helpful if possible :slight_smile:

The site is http://buildingbloqs.com and specifically http://buildingbloqs.com/enquiry is where the problem was reported.


#6

For anyone else that looks here with similar problems, I also found that there were issues with the ‘expand/shrink if needed’ properties on children of the main flexbox also, and have had to remove those.


#7

I’m afraid I don’t have good news for you; the footer isn’t positioned at the bottom. :weary:

Is there a specific reason why you’re wrapping all your content with flexbox? I’m asking this because flex-direction column works pretty badly in IE.
If the reason you’re doing this is to make sure the footer stays at the bottom even when the page doesn’t have enough content, there are other ways to do it. A while back I had this issue and was able to solve it with a little bit o javascript. I can try to find the script if you want to.


#8

Hi @Filipa, so sorry I forgot to respond to this. Thank you for checking it. It’s a very frustrating issue! The reason for the flexbox is as you guessed, but I think I will remove it. I actually in this case, having looked through, am not sure there are many pages that would be effected now by lack of content, but it would be good to have the peace of mind if you do have said JS to hand!

Thanks again for all your help.


#9

Hi @joshuafry :wave:
Here’s the script (place it in your footer code) - It’s from @bartekkustra and it works really well :

<script>
 $(document).ready(function() {
  /* vp_h will hold the height of the browser window */
  var vp_h = $(window).height();
  /* b_g will hold the height of the html body */
  var b_g = $('body').height();
  /* If the body height is lower than window */
  if(b_g < vp_h) {
   /* Set the footer css -> position: absolute; */
   $('.footer').css("position","absolute");
  }
 });
</script>

#10

Thank you so much :slight_smile:


#11

You’re welcome :slightly_smiling_face:


#12

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.