CODEWITHSUNDEEP
reactjsmaterial-ui
user840718
user840718

Reputation: 1611

How to display inline Autocomplete component?

I'd like to display inline the Autocomplete component, either alonside other Autocomplete components and/or any other React MUI components.

Starting from the example about countries from the doc:

Edit CountrySelect Material Demo

In index.js my first attempt was the following:

import * as React from "react";
import ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "@mui/material/styles";
import Demo from "./demo";
import TextField from "@mui/material/TextField";

ReactDOM.createRoot(document.querySelector("#root")).render(
  <StyledEngineProvider injectFirst>
    <Demo />
    <Demo />
    <TextField />
    <TextField />
  </StyledEngineProvider>
);

with this outcome:

Inline test

As you can see, while a component like TextField is automatically displayed inline, we cannot say the same thing for Autocomplete.

So, my second attempt was to force the inline property by a Box as shown in the doc:

import * as React from "react";
import ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "@mui/material/styles";
import Demo from "./demo";
import TextField from "@mui/material/TextField";
import Box from '@mui/material/Box';

ReactDOM.createRoot(document.querySelector("#root")).render(
  <StyledEngineProvider injectFirst>
    <Box component="div" sx={{ display: 'inline' }}><Demo /></Box>
    <Box component="div" sx={{ display: 'inline' }}><Demo /></Box>
    <TextField />
    <TextField />
  </StyledEngineProvider>
);

Result: even in this case nothing changed.

I cannot figure out what is wrong. Am I missing something?

Upvotes: 0

Views: 1550

Answers (1)

Adarsh Raj
Adarsh Raj

Reputation: 425

You may give a try to Stack Component available in doc.

<Stack direction="row" spacing={2}>
    <Demo />
    <Demo />
</Stack>

Edit:

I have looked at your Demo.js and found this solution. It may help you. Adding this line in <Autocomplete> sx={{display : 'inline-flex', width : '50%' }} may solve your problem as it does in sandbox. Here's sandbox.

Also width may cause problem.

Upvotes: 1

Related Questions