Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Media & Text block is not aligning in IE 11 #11577

Closed
mahdiyazdani opened this issue Nov 7, 2018 · 8 comments · Fixed by #10812
Closed

Media & Text block is not aligning in IE 11 #11577

mahdiyazdani opened this issue Nov 7, 2018 · 8 comments · Fixed by #10812
Labels
[Block] Media & Text Affects the Media & Text Block Browser Issues Issues or PRs that are related to browser specific problems Needs Testing Needs further testing to be confirmed. [Type] Question Questions about the design or development of the editor.

Comments

@mahdiyazdani
Copy link
Contributor

I wonder while we know that display: grid is NOT supported in IE11 and will not be implemented in any possible way, why are we still pushing for it?

We can either drop the IE11 support or stick to the cutting edge CSS techniques.

@designsimply designsimply added Needs Testing Needs further testing to be confirmed. [Block] Media & Text Affects the Media & Text Block Browser Issues Issues or PRs that are related to browser specific problems labels Nov 7, 2018
@desrosj desrosj added the [Type] Question Questions about the design or development of the editor. label Nov 7, 2018
@drdogbot7
Copy link

I can see the value in using display:grid;, if it's enabling us to do something we couldn't do otherwise, but it makes no sense to me here.

Wouldn't display:flex; be more appropriate and more compatible?

@kuchenundkakao
Copy link

This should really at least get a fallback. Maybe put something like this into the general block stylesheet? (Makes the content float with 50% width in IE11, shows correctly in other browsers)

/*--------------------------------------------------------------
## Gutenberg Media & Text Block Fallback for IE11
--------------------------------------------------------------*/
.wp-block-media-text:after {
	display: table;
	content: "";
	clear: both;
}
.wp-block-media-text figure {
	float: left;
	width: 50%;
}
.wp-block-media-text .wp-block-media-text__content {
	float: right;
	width: 50%;
}
.wp-block-media-text.has-media-on-the-right figure {
	float: right;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	float: left;
}
@supports (display: grid) {
	.wp-block-media-text figure {
		float: none;
		width: inherit;
	}	
	.wp-block-media-text .wp-block-media-text__content {
		float: none;
		width: inherit;
	}	
	.wp-block-media-text.has-media-on-the-right figure {
		float: none;
	}
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
		float: none;
	}
}

@thewebwright
Copy link

Thanks a million kuchenundkakao! Been futzing with this on a client's site for 2 days.

@mario-neuhold
Copy link

Additionally to the flex or float approaches, this actually can be done with grid in IE, via display: -ms-grid.
The main problem with the IE implementation of grid is the lack of support for grid-template-areas: "media-text-content media-text-media"; of the container and the corresponding grid-area: media-text-content; of the columns.
But this can be easily translated into -ms-grid-col to work in IE.

This is what got it working for me on IE11:


/*---------------------
  IE 11 grid fix
-----------------------*/
.wp-block-media-text {
	display: -ms-grid;
	-ms-grid-columns: 50% auto;
}

/* default media on the left */
.wp-block-media-text .wp-block-media-text__media {
	-ms-grid-column: 1;
}
.wp-block-media-text .wp-block-media-text__content {
	-ms-grid-column: 2;
}

/* media on the right */
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
	-ms-grid-column: 2;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	-ms-grid-column: 1;
}

@mitchhawkins
Copy link

Thank you so much @mario-neuhold!
I dad no idea that IE and Edge weren't displaying properly; got a big shock when going to test and media images stretched/stacked.

One small typo in the first grid it says '-ms-grid-columns' and should be '-ms-grid-column'.

@thewebwright
Copy link

I'm not sure that's a typo @mitchhawkins. I think the plural is for the container and the singular column is for classes within the container. The code, as @mario-neuhold has it, worked for me.

@clarklab
Copy link

Still running into this. Fwiw, I'm kinda shocked that a core block shipped without IE11 support. The fix from @mario-neuhold basically fixes thing, but column gap is still missing.

It's hard for me to view columns as progressive enhancement. And I can guarantee most clients won't.

@LukaszJaro
Copy link

Any chance this will land in WP 5.3?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Media & Text Affects the Media & Text Block Browser Issues Issues or PRs that are related to browser specific problems Needs Testing Needs further testing to be confirmed. [Type] Question Questions about the design or development of the editor.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants