Pro 3.0.4 Flexbox Containers IE Display issue

I enabled the Flexbox layout option for the containers in a row. IE layout is broken. Does Pro use IE fallbacks for the FLexbox options? IE supports Flexbox, but just the earlier draft and needs fallbacks to not have issues.Disabling flex layout fixes issue, but I’d prefer to be able to have Flexbox enabled.

I’ll leave the URL in a secure note.

Hi @ehsd,

Thank you for writing in, I have check that page on IE11 and I don’t see any other issue rather than that text below “Electronic Timesheet Training Webinars” headline that overlaps on the left column. You can resolve that by setting that text element’s max-width to 100%.

Please clarify how we can replicate the said issues.

Cheers!

Adding the max-width fixed that issue. There is an additional small issue. On the same page, in the shaded boxes in the center top, the text looses its padding. It looks like this is a IE media query the sets the padding to 0:

from the main stylesheet (integrity-light.css: 763):
.ie .x-col {
padding-left: 0 !important;
padding-right: 0 !important
}

I can override this, but I need to only appy it to the column/text elements. If not restricted to those elements it breaks the video layout in the middle of the page.

Hi @ehsd,

You can apply a custom CSS to specific element/column by adding it to the Element CSS area.

Add this to your Column’s Element CSS area.

.ie $el.x-col {
	padding: 1vw 1vw 1vw 1vw;
}

Hope it helps,
Cheers!