Is there a way to stop the MUI Select component's width from increasing when I choose multiple options?

Please check out the demo I created on codesandbox by clicking here

View codesandbox demo

I have implemented the MUI Select component with various props to enable multiple options selection without a fixed width constraint. Using a grid layout, I have evenly divided the width among all child components by assigning each a fraction value of 1fr.

<Grid container>
        <Grid xs item>
          Filter By Site
        </Grid>
        <Grid xs item>
          Filter By Group
        </Grid>
        <Grid xs item>
          Filter By Cams
        </Grid>
        <Grid item xs>
          <FormControl>
            <InputLabel id="demo-multiple-name-label">Name</InputLabel>
            <Select
              labelId="demo-multiple-name-label"
              id="demo-multiple-name"
              multiple
              value={personName}
              onChange={handleChange}
              input={<OutlinedInput label="Name" />}
              MenuProps={MenuProps}
            >
              {names.map((name) => (
                <MenuItem
                  key={name}
                  value={name}
                  style={getStyles(name, personName, theme)}
                >
                  {name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Grid>
      </Grid>

One issue I am facing is that the Input element keeps expanding when selecting multiple options. How can I ensure it remains the same width as its sibling elements?

Answer №1

Instead of using the Select component, you can opt to incorporate the fullWidth prop within a TextField component and set it to false.

Consider implementing something similar to the following:

<TextField
  id="age"
  className="text-field-short"
  ref="textfield"
  hintText="Full name"
  errorText={this.state.errorTextName}
  onChange={this._handleErrorInputChange}
  fullWidth={false} // by setting fullWidth to false, expansion is prevented
/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent backspace and delete keys from functioning in a column of a DataGrid using material-ui

Does anyone have a solution for disabling the backspace and delete keys in a column when using DataGrid with material-ui? ...

Ways to align various paragraphs within a single Bootstrap row

Looking to include notes on the right side of each input field? Check out this example I put together using a bootstrap layout. <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4 ...

Letters are frolicking in varying sizes and designs

Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the pr ...

Ways to align the navigation icon to the left side

I need help positioning my help icon at the bottom of the screen, regardless of the user's monitor size. I've tried using margin and margin-top, but it doesn't adjust properly when changing monitor sizes. Any suggestions or assistance would ...

Looking for a way to identify when a DOM element is resized as a result of web fonts loading asynchronously?

Within this div element lies text styled with a custom font via CSS's @font-face attribute. The issue arises when the font hasn't loaded yet, causing a delay in updating the font style of the text within the div. As a result, taking measurements ...

Blazor: Personalizing color variables in _root.scss - A Step-by-Step Guide

Upon inspecting the generated project, I noticed a multitude of color variables such as --bs-body-bg. The developer tools indicate it is in _root.scss, however, that file appears to be non-existent and I suspect those variables may actually reside within b ...

"The form validation feature with regex does not seem to be functioning properly on the MUI React

I've been attempting to incorporate a regex pattern into inputProps in order to validate the Textfield and make it required, but unfortunately, neither seem to be functioning properly. Upon clicking "next," empty or incorrect inputs are still being ac ...

Limiting the scope of a CSS style to only apply to a specific element and all of its child

Today, I am encountering an issue with restricting the application of CSS. The <div class="parent"> <div id="childWithNoCss"> <p>No css</p> </div> <div id="childWithCss"> <p>Apply css</p> </div> </ ...

Customizing the sign-in template by adding a personalized background image

Student Programmer Alert: I am currently working on implementing the Material-UI Sign in Template, but I'm facing difficulties with setting up a full-screen background. No matter where I try to insert the image, it seems to clash with the sign-in cont ...

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

Using React and Material-UI: Implementing button functionality to call another class using hooks in the main App component

Just starting out with React/MUI and currently working on different components for a website, so the UI is not a priority at the moment. Encountering an issue when trying to create a button that links to the Sign Up page (similarly for Sign In): Error: ...

Is it possible to customize the color of icons in react's Material-table?

I'm currently utilizing the material-table library and I'm struggling to individually change the color of each icon. Could you assist me with this? I attempted custom CSS, but it's affecting all icons at once instead of specific ones. Here i ...

Retrieve the current font style with Kendo UI Editor

Recently, I've been facing some challenges while working with the Kendo UI Editor. Specifically, I'm struggling to retrieve the current font style. My goal is to use JavaScript or jQuery to obtain the following values: Values I am looking for: ...

Incorporating Social Share Buttons to Enhance User Engagement on Your WordPress E

Looking to enhance my product page by adding social icons right below the 'Add to Cart' button. The product page URL is https://flowersforeveryone.co.za/product/cheerful-orange-tulips/. I already have a 'social menu' set up. How can I ...

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...

Issues with implementing the Skeleton feature in the Alert module

Having an issue with a Skeleton component not taking full width inside an Alert component. It seems to be occupying less space than expected. https://i.stack.imgur.com/cMLEy.png Here is the relevant code snippet: <Alert icon={<NotificationsIcon s ...

Using react-hook-form for form submission and managing state in React

I want a button that toggles between displaying "Edit" for entering Edit mode and "Save" for submitting the form. However, the issue is that when I press the button while it shows "Edit," it submits the form. Link to codesandbox with the code provided be ...

JavaScript may not display height as anticipated

Currently, I am experimenting with JavaScript in order to achieve a website section that is 100% the height of the screen minus the "nav" bar. Imagine it as having two visible components - the first one being large and the second one small at the bottom. ...

Enable scrolling for a div positioned beneath another div

I am working with an iPad frame and trying to implement a feature where a larger image scrolls behind it as the user scrolls down the page. Although my CSS is more complex than the example provided in this link, I am struggling to get even that basic funct ...

Facing issues with Material-UI Tabs functionality when loading in JavaFX WebView

I am encountering an issue with integrating a webpage built using React and Material-UI into my desktop application through JavaFX's WebView. The problem arises when attempting to use the Tabs from Material-UI, as they do not function correctly. Initi ...