Center Text Field to Linear Progress in React

Question

Center Text Field to Linear Progress in React

I'm struggling to position a TextField/Autocomplete with a loader/linear progress at the bottom without it pushing the TextField/Autocomplete upwards. Can anyone suggest a proper solution for this issue?

For reference, you can check out the Codesandbox demo HERE

      <Grid component="div" item xl={2} lg={2} md={2} sm={12} xs={12}>
        <CategorySelect />
        <Box
          sx={{
            marginTop: "0.5rem"
          }}
        >
          <LinearProgress />
        </Box>
      </Grid>

css reactjs react-hooks material-ui

Answer 1

Answer №1

To achieve a fixed height for the select wrapper, you can implement the following code snippet:

<Grid component="div" item xl={2} lg={2} md={2} sm={6} xs={6}>
  <Box height={50}>
    <CategorySelect />
      <Box marginTop="0.5rem">
        <LinearProgress />
     </Box>
   </Box>
</Grid>

<Grid component="div" item xl={2} lg={2} md={2} sm={6} xs={6}>
  <Box height={50}>
    <ProductSelect />
  </Box>
</Grid>

Answer 2

To achieve a fixed height for the select wrapper, you can implement the following code snippet:

<Grid component="div" item xl={2} lg={2} md={2} sm={6} xs={6}>
  <Box height={50}>
    <CategorySelect />
      <Box marginTop="0.5rem">
        <LinearProgress />
     </Box>
   </Box>
</Grid>

<Grid component="div" item xl={2} lg={2} md={2} sm={6} xs={6}>
  <Box height={50}>
    <ProductSelect />
  </Box>
</Grid>

Answer 3

Answer №2

Consider incorporating the following two classes:

.css-1aoszdt-MuiGrid-root > .MuiGrid-item {
    padding-left: 16px;
    position: relative;
}
.css-zxnm37 {
    margin-top: 0.5rem;
    width: calc(100% - 15px);
    position: absolute;
}

Answer 4

Consider incorporating the following two classes:

.css-1aoszdt-MuiGrid-root > .MuiGrid-item {
    padding-left: 16px;
    position: relative;
}
.css-zxnm37 {
    margin-top: 0.5rem;
    width: calc(100% - 15px);
    position: absolute;
}

Center Text Field to Linear Progress in React

Answer №1

Answer №2

Similar questions

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Images from the section will not be shown when retrieving data from the sanity io database

Verify if a certain value is present within a nested array

I'm experiencing some unusual behavior with the Windows media app when using HTML and CSS

Discovering the window.scrollTop, ScrollY, or any other distance value while utilizing CSS scroll snap can be achieved by following these

Using Javascript, you can create a function that can disable or enable a text link based on

What is the best way to increase the size of the left margin?

The Zustand store does not reflect changes when the URL is updated

Use jQuery to calculate the width of the wrapper and evenly divide it among the div elements inside

Using React refs to target multiple elements dynamically with the help of the map

Having difficulty adjusting the StartIcon margin within the MUI Button example, unable to override its values

Using React.js in combination with JWT, Socket.io for user authentication

Tips for adjusting the height of both an iframe and a div to fit perfectly at 100% combined

Encountering a React js error while in production mode, Minified React error #301

Switching between tabs in a Material UI React Tab component can be achieved by changing the

Adjust the paragraph font size within the bootstrap stylesheet

The simplest way to increase the size of a child element in order to generate a scrollable area

Creating dropdown options within a DataGrid in Form.IO: A step-by-step guide

Encountering an issue with importing an enum: An error is triggered stating 'Variable implicitly has type 'any' in certain areas where its type remains undetermined.'