fix: TableRowCell style to make it work on IE11 #197
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Objective
On IE11 the content of the
TableRowCell
is not center aligned.Add style necessary to make content be centered.
Context
We have a layout issue on
Performance
when displaying theTable
component onIE11
.The style behind the
TableRowCell
is:making the content of the row look like this (lightCoral background is the content)
![image](https://user-images.githubusercontent.com/3228237/71682428-7624d800-2d6e-11ea-9433-4f90b39d2e79.png)
Investigating a little bit seems that
IE11
don't like flex more specific the combination ofalign-items: center
andmin-height: xxx
• https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
• philipwalton/flexbugs#231
Changes
Add an
:after
withmin-height: inherit;
as workaround.Notes
Tried the other workaround that found: Set a fixed
height
less thanmin-height
this was making row cell don't expand on multiline table. 👎Was getting issues trying to run storybook locally on IE11 and also trying to link kaizen with
performance-ui
so to test this i updated the code locally on perform and run it on IE11 to be sure fix is working.Unfortunately couldn't test the storybook on IE11 =[
Like i said, this is a workaround, not sure if is the best solution.
Slack conversations: https://cultureamp.slack.com/archives/CETLTFG9G/p1577132688040100