UIKit layout bug - IE 11

[Peter Knight]

 

Hi guys

I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints.

You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints.

The main column in the above URL is successfully centered in most browsers except IE11.

On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally.

Here's a simple CodeKit and JSFiddle of the issue

https://codepen.io/edenstudios/pen/qvWpGo

https://jsfiddle.net/EdenSt/auekfgqt/8/

Thanks
P

 

 

[Tom.]

Hi @Peter Knight

Change uk-width-expand to uk-width-1-1

IE11 has some strange bugs with flex - I believe the issue is with flex: 1 and max-width, it's respecting both but it's treating it like space-between. For whatever reason, I don't know. As you have a max-width defined in this instance uk-width-1-1 will work fine. 

[Autofahrn]

For me removing the uk-width-expand from the inner div (the one with class=' uk-width-1-1@s uk-width-1-2@m uk-width-4-6@l uk-width-expand pk-col-bod') seems to fix it (not verified other aspects of the layout). But I won't consider a width of 1700 pixels to be a quite big resolution nowadays.

[Peter Knight]

1 hour ago, Tom. said:

Hi @Peter Knight

Change uk-width-expand to uk-width-1-1

IE11 has some strange bugs with flex - I believe the issue is with flex: 1 and max-width, it's respecting both but it's treating it like space-between. For whatever reason, I don't know. As you have a max-width defined in this instance uk-width-1-1 will work fine. 

Thanks Tom. That largely works ok. I've yet to test it fully.

The tricky part here is that the layouts across the site are using bespoke widths and stepping outside the normal UIKit columns widths etc.

But that's a huge help and seems promising enough to start testing from. 

 

[Peter Knight]

15 minutes ago, Autofahrn said:

For me removing the uk-width-expand from the inner div (the one with class=' uk-width-1-1@s uk-width-1-2@m uk-width-4-6@l uk-width-expand pk-col-bod') seems to fix it (not verified other aspects of the layout). But I won't consider a width of 1700 pixels to be a quite big resolution nowadays.

Agreed. I just need to add some custom widths to the pk-col-bod to make it mimic the previous layout etc.