0

I have tried a django/react app as well as a base react app made using the create-react-app command. Both end up breaking in one way or another. For instance, the align-items tag does nothing (tried center, right, left). On my django/react app I have a header that loads perfectly on chrome but all I see is a background color on edge.

Yudjinn
  • 11
  • 1
  • align-items is a CSS property not a tag. Please provide an example that shows the inconsistency – Iain Shelvington Aug 19 '20 at 05:16
  • Sorry, my point wasnt necessarily the tag, but that edge does not seem to be loading react apps. – Yudjinn Aug 19 '20 at 05:22
  • Is there any error in console in Edge Chromium? Please provide [a minimal, reproducible sample](https://stackoverflow.com/help/minimal-reproducible-example) so that we can have a test and see how to help. With only the above description, we can't locate the issue and can't provide any help. – Yu Zhou Aug 20 '20 at 01:55

2 Answers2

0

Maybe you should try adding display:flex so that the align-items property works.And for different browser testing try the webkit rule so that it is stable across all browsers. See if it helps. Thank You

Rohit Khalkho
  • 1
  • 3
  • so I was using display:grid at the time, but flex also doesnt work. Can you explain the webkit rule further? – Yudjinn Aug 19 '20 at 05:17
  • Hi Yudjinn , You can find a reference about webkit and cross browser css testing idea in here https://stackoverflow.com/questions/3468154/what-is-webkit-and-how-is-it-related-to-css . Thank You – Rohit Khalkho Aug 19 '20 at 06:24
  • Hey, so according to that, edge and chrome both work off of the blink engine. Shouldn't that mean either should load my react app? – Yudjinn Aug 19 '20 at 14:39
  • Hi, Yes it will load your react app on all browsers irrespective that sometimes the css conflicts happen due to some browser incompatibility so defining webkit rule solves the issue. – Rohit Khalkho Aug 19 '20 at 15:07
0

I'm going to be honest, I went and reloaded the server (have not changed anything since my posting) and it's working completely fine now. I was looking for errors but I dont see any. To clarify, I was having issues with displaying CSS correctly in a react app. Even using the baseline create-react-app and using a align-items property would not function at all in Edge, but would in chrome. Thanks to all who tried to help; hopefully this was a weird one-off.

Yudjinn
  • 11
  • 1