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

Weird 8px <body> margin when following new vite tutorial #8407

Closed
smeng9 opened this issue Nov 19, 2022 · 1 comment · Fixed by #8415
Closed

Weird 8px <body> margin when following new vite tutorial #8407

smeng9 opened this issue Nov 19, 2022 · 1 comment · Fixed by #8415

Comments

@smeng9
Copy link
Contributor

smeng9 commented Nov 19, 2022

What you were expecting:

I expect there are no extra margin when following the tutorial

What happened instead:

There are some margins after completing steps of https://marmelab.com/react-admin/Tutorial.html#mapping-api-endpoints-with-resources

Steps to reproduce:

Create new vite project and follow tutorial till https://marmelab.com/react-admin/Tutorial.html#mapping-api-endpoints-with-resources

margin

Related code:

https://github.com/vitejs/vite/blob/main/packages/create-vite/template-react-ts/src/index.css#L28

Other information:

Also, remove the default Vite CSS fom the `main.tsx` file:

We shall preserve part of this index.css file

Environment

  • React-admin version: 4.5.1
  • Last version that did not exhibit the issue (if applicable): 4.5.0
  • React version: 18.2.0
  • Browser: Edge 107
  • Stack trace (in case of a JS error):
@WiXSL
Copy link
Contributor

WiXSL commented Nov 21, 2022

I think you are right.
The simple project has a style set of body { margin: 0 } in its index.html file.

We have to fix the docs.

To fix that, add the following to your project's index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
+    <style>
+      body {
+        margin: 0;
+     }
+   </style>
  </head>    
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants