Pro - ‘Columns’ Footer Container Formatting Broken in Internet Explorer

Support
#1

Hey Apex team,

Loving the header and footer tools in Pro, they are amazing. I’m having a slight issue with the Columns footer in Pro: text seems to not be contained using IE 11.

The issue:

How it looks everywhere else:

Login credentials incoming…

#4

Hi There,

In IE 11 it doesn’t honour the flex position like webkit based browsers such as Chrome and Firefox. This means that on the parent container and the element itself Flex needs to be set to 1 for it to function or you can add a min and max-width using a custom class with a percentage of your choosing to ensure the text wrap works correctly.

You can find out more about this via: https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox

Hope this helps.

Thanks!

#5

Thank you @rubin, this is very helpful. Thank you for the resource link to #stackoverflow. I will test and report back for anyone that has this issue in the future.

#6

Internet Explorer 11 is so great! /s. Take a look at a related issue I’m experiencing with dropdown menu formatting on IE11. The secondary menu is not aligning to the bottom of the the primary menu item.

The issue:

How it looks everywhere else:

Is this also occurring because IE does not honor the flex position?

#7

I did some digging and came across this thread, referencing the Internet Explorer 11 drop down issue in Pro: https://theme.co/apex/forum/t/internet-explorer-11-drop-down-issue-in-pro/3231/10

Adding the following Global CSS resolved the formatting issue in IE11:

ul.x-menu .x-dropdown {
    position: absolute !important;
    left: 0px !important;
    top: 100% !important;
}

Still working on a fix for the IE11 Columns footer issue in Pro…

#8

Hi again,

Glad your header issue is fixed, to fix the footer issue in IE11 try adding the following code in your Customizer:

.x-text-standard {
    width: 100% !important;
}
footer.x-colophon .x-bar-content {
    max-width: 1500px !important; 
}

Let us now how this goes!

1 Like
#9

Brilliant @Nabeel!

This resolved the issue in Internet Explorer 11. Thank you very much for your awesome support. :vulcan_salute:

1 Like
#10

Glad it’s resolved.

Cheers!

#11

Hi Nabeel

Can I please get a confirmation that this CSS works for all footers across the Pro theme?

Ie. does this fix the issue in general?

Cheers,
Sam

#12

Hi @grannysam11,

It should, but it depends on your target layout size, you should enhance that CSS to your preference, example, change the 1500px to 1024px if your target max layout is 1024px.

Thanks!

#13

Thanks for the snippet here, I’ve been able to solve the exact same issue.
But shouldn’t this be on the list of bug-fixes, so we don’t have to add such snippets everytime on all our sites that have three columns?

#14

Hi there,

We’ll add them once we verified the issue, I checked it again on my install and can’t reproduce it on my installation for IE11. Plus, IE browser behaves inconsistently indifference case and scenario.

Thanks!