Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React Admin Vite not showing full width content

See original GitHub issue

Hi, please check this, is this bug?

What you were expecting: Show full width like React Admin Tutorial

What happened instead: React Admin using Vite not showing full width content

Steps to reproduce: I tried follow Vite tutorial then Get Started - Tutorial And the result is https://stackblitz.com/edit/vitejs-vite-g35d9t?file=src/App.jsx

Environment

React-admin version: 4.4.4
Last version that did not exhibit the issue (if applicable):
React version: 18.2.0
Browser: Brave [Version 1.43.93 Chromium: 105.0.5195.127 (Official Build) (64-bit)](https://brave.com/latest/)
Stack trace (in case of a JS error):

Issue Analytics

State:
Created a year ago
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

slax57commented, Oct 28, 2022

You are correct! I’ll reopen this issue and mark it as documentation issue.

1reaction

slax57commented, Oct 28, 2022

You have left-over content in the index.css file that is conflicting with react-admin styles. You should remove it.

We currently have our simple demo (https://github.com/marmelab/react-admin/tree/master/examples/simple) and the e-commerce demo (https://github.com/marmelab/react-admin/tree/master/examples/demo) running with vite without any issues. So compatibility with vite should not be a problem 😉

Top Results From Across the Web

<AutocompleteInput /> fullwidth property not working #4093

What happened instead: For <AutocompleteInput /> without <ReferenceInput /> , after setting the fullWidth property, the width becomes smaller.

The Show Component - React-admin - Marmelab

By default, the Show view renders the main content area inside a MUI <Card> . The actual layout of the record fields depends...

React-admin - Theming

All react -admin components expose an sx property, which allows to customize the component style. It uses the CSS-in-JS solution offered by MUI,...

The List Component - React-admin - Marmelab

The <List> component fetches the list of records from the data provider, and renders the default list layout (title, buttons, filters, pagination). It...

Input Components - React-admin - Marmelab

fullWidth, Optional, boolean, false, If true , the input will ... Most inputs accept a helperText prop to display a text below the...