Using flexbox with a Material UI Select Component: A guide for beginners

I am currently utilizing Material UI for a project and looking to create a dropdown with a unique layout featuring 2 columns:

https://i.sstatic.net/l8Jio.png

Here is an excerpt of my code in progress:

<Select>
  <MenuItem>item 1</MenuItem>
  <MenuItem>item 2</MenuItem>
  <MenuItem>item 3</MenuItem>
  <MenuItem>item 4</MenuItem>
</Select>

I attempted to group 'item 1' and 'item 2' within a flexbox container using React fragment or div, but this caused the select dropdown functionality to fail - selecting options became unresponsive.

<Select>
  <div>
    <MenuItem>item 1</MenuItem>
    <MenuItem>item 2</MenuItem>
  </div>
  <div>
    <MenuItem>item 3</MenuItem>
    <MenuItem>item 4</MenuItem>
  </div>
</Select>

I wish to maintain the separate containers as I also need to incorporate scrollbars within each. Is there a method to retain the containers without compromising the select functionality?

cssflexboxmaterial-ui

Answer №1

If you want to customize the appearance of the popup, consider applying grid styling directly to the MuiList-root class. Before doing so, ensure that you remove any unnecessary wrapping divs.

.MuiList-root {
    display: grid;
    grid-template-columns: 1fr 1fr;
 }

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

"Mastering the art of CSS: The ultimate guide to perfecting

I am seeking advice on the best way to format the layout below, ensuring everything is properly aligned and neatly spaced: Below is the HTML code: <div class"wrapper"> <img alt="Image 1" src="images/image1.png" /> <div class="descripti ...

htmlcssformatting

What is the best way to ensure that my search box is responsive in HTML and CSS while also horizontally centering the search_box div?

Question 1: I need assistance in making this search box responsive. Every time I try to adjust the screen width, the button ends up below the input field. How can I resolve this issue? Question 2: Is there a way to horizontally center the div class=" ...

htmlcssresponsive-designbootstrap-5

Pressing the "Tab" key while inside the MUI Data-Grid dialog will cause it

Having a MUI Data Grid with the ability for users to edit cell values, I am encountering an issue. The cell renders a MUI Dialog using renderEditCell, which contains multiple input fields (MUI TextField) that should be navigable by tabbing through them. H ...

reactjsmaterial-uimui-x-data-grid

"Step-by-step guide on creating a dynamic clipping mask animation triggered by mouse wheel

I have developed a sample that functions just as I envision my final outcome to function, with the exception of triggering on mouse-over. Instead, I would like it to activate as a page transition when scrolling with the mouse. (move your cursor over the i ...

javascripthtmlcssmaskclipping

What is the best way to create a React filter utilizing the Autocomplete component from MaterialUI and incorporating state management?

I am currently in the process of creating a filter using the Autocomplete component from MaterialUI. As I select options from the dropdown menu, several things are happening: The Autocomplete automatically adds the selected options to the Chip Array. The ...

javascriptreactjsmaterial-uireact-props

Create a CSS layout with two columns that each take up 50% of the

Is there a way to create a 2 column div with equal width of 50% each, without using floats? Yes, by setting the display property to inline-block. However, a problem arises when attempting to set both columns to exactly 50% - the second div ends up going do ...

css

JQuery is throwing an unhandled reference error

I'm currently working on a jQuery script that looks like this: <script type="text/javascript"> $(document).ready(function () { var $containerHeight = $('.container').height(); if ($containerHeight < 760) { ...

jqueryhtmlcss

What is the best way to create a collage of images with a random and unique arrangement?

Recently, I stumbled upon a website and was intrigued by the unique effect of images randomly appearing on the screen. I'm curious about how this effect can be achieved. Is it possible to use CSS Grid to divide the screen and designate some grid ite ...

javascripthtmlcssreactjs

Alignment of label not remaining centered vertically, issue with bootstrap

Struggling with getting this label to stay centered vertically? It always seems to appear at the top. Any help would be greatly appreciated. Thank you! Check out the code here <div class="container"> <div class="row"> <div clas ...

htmlcsstwitter-bootstrap

How can I create a custom AppBar transition using Material-UI?

Is there a way to incorporate transitions into the AppBar element within Material-UI? I have tried adjusting the class properties, but unfortunately, I'm not seeing any animation. Can anyone pinpoint what the issue might be? To see the code in action ...

cssreactjstransitionmaterial-uijss

Will HTML eventually include a syntax for image spriting?

My knowledge of the latest CSS updates is a bit outdated, so I thought it was worth inquiring; The <img> tag is typically written as <img src="/url.png" />, with auto or specified height and width. While I appreciate CSS sprites for their fast ...

htmlcssbackground-imageimage

Prevent Modal from moving along with the scrollbar by utilizing Material-UI's "mui-fixed" feature

Currently, I am in the process of implementing a Material-UI modal and have encountered an issue with the scrollbar causing the modal to shift every time it closes. Although I can address this by using the "mui-fixed" class, it introduces unwanted padding ...

reactjsmodal-dialogmaterial-uiscrollbar

Tips for effectively utilizing the desktopModeMediaQuery feature in the MUI DatePicker

I need help understanding how to utilize the desktopModeMediaQuery feature from material ui. The only relevant link I found was about the Material UI responsive date picker. However, this did not provide specific instructions on how to use desktopModeMed ...

reactjsmaterial-ui

Switch the dropdown menu to a button if it consists of only one option

I have been using a database within the Moodle Learning Management System that generates a bootstrap table. Here is an example of what it looks like: https://i.sstatic.net/UJc4M.png The last row in the table contains a dropdown menu. When viewing your ow ...

javascripthtmlcsstwitter-bootstrap

Link is causing CSS style to malfunction

I am facing an issue with the styling of my JSP page. When I link the external style sheet using this code: <link rel="stylesheet" type="text/css" href="/doctor/css/form_input.css" /> it seems to have no effect on the appearance of my page. However ...

htmlcssjsp

Enhancing Image Quality in JavaFx's Scene Builder

Hey everyone! I've been using JavaFx scene builder to create a user interface with some png images. Up to now, I've been using labels and enlarging them to display the pictures, but this solution isn't ideal because I need to create multipl ...

javacssjavafxscenebuilder

Resizing an image within a div with automatic adjustment, centered and aligned to the bottom position

I'm really struggling to understand this concept and not making much progress. I have a background image that automatically scales to fit the window size. In front of it, I want to center an image fixed to the bottom of the page, while still being sca ...

csshtmlpositionmarginautoscaling

Creating a customized Paypal form with user-selected options

I want to make it easy for visitors to my website to pay through Paypal by simply clicking on a link that will take them directly to the checkout page. What I'm looking for is a way to provide basic options such as: Allowing users to enter their na ...

htmlcsspaypal

Bootstrap rows are in need of additional padding

Could someone kindly explain what's incorrect with this? .container { margin-top: 10px; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="panel panel-primary"> <d ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for moving the title to the next line within a card design

I'm currently working on an antd Card and I am trying to figure out how to display the title on two lines if it is too long. For example, instead of showing "This title needs to go to ne...", I would like it to be split into two lines as "This title n ...

javascripthtmlcssreactjsantd