"What are some creative ways to customize the appearance of a Material-UI Select-field Dropdown menu

I am currently utilizing the material-ui select-field component.

<SelectField
   multiple={true} 
   hintText="Checkbox Filters"
   dropDownMenuProps={{
     iconButton:<ActionHome />,
   }}
   className="checkbox-com"
   underlineStyle={{display:'none'}}
   hintStyle={{bottom:'13px', overflow: 'hidden',  whiteSpace: 'nowrap', textOverflow: 'ellipsis', width: 
   'calc(100% - 40px)', color: '#757575', fontWeight: 500}}
   labelStyle={{top: 0, paddingRight: 40, height: 48, lineHeight: '48px'}}
   iconStyle={{top: 2,right: 10, fill: '#757575', width: 44, height: 44}}
   style={{maxWidth: '200px', minWidth: 200, width: 'auto', lineHeight: '22px', height: 48, fontSize: 
   14}}>
 <List>
     <ListItem
       leftCheckbox={<Checkbox />}
       primaryText="Project 1"
       innerDivStyle={{fontSize: 14, paddingLeft: 60}}/>
     <ListItem
       leftCheckbox={<Checkbox />}
       primaryText="Project 2"
       innerDivStyle={{fontSize: 14, paddingLeft: 60}}/>
     <ListItem
       leftCheckbox={<Checkbox />}
       primaryText="Project 3"
       innerDivStyle={{fontSize: 14, paddingLeft: 60}}/>
  </List>
 </SelectField>

However, the display is not as expected.

I would like to achieve this appearance instead:

Please provide guidance on styling the dropdown menu accordingly

htmlcssreactjsmaterial-ui

Answer №1

From what I gather from your inquiry, it seems like you are seeking 

anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}

In relation to the MenuDropDropdown widget

Answer №2

The standard operation of the Material UI select field is to display this way, but you have the power to customize it

.custom-select-panel {
    margin-top: 36px;//Adjust according to your select box height
}

Add !important if necessary for overriding other styles

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

Laravel picks up on hushed tones

Is there a way to send messages from the client to the server using Laravel Echo and then save those messages in a database? I did some research and found out that the whisper method can be used to send messages to the Redis server. window.Echo.join(' ...

reactjslaravelsocketsredislaravel-echo

Tips for wrapping text around an image using Bootstrap 5

I am having trouble getting my text to wrap around an image using the Bootstrap 5 grid system. I've attempted to use 'float: right' on the image, but it hasn't produced the desired result. The text should flow naturally around the imag ...

htmlcssbootstrap-5

Utilizing logic classes in conjunction with styled components

I am seeking a way to utilize this logic in order to assign the appropriate class to an element: <ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}> However, as I am employing styled component ...

javascriptreactjsnext.jsstyled-components

CSS - selecting elements that are greater than a specific criteria N

I have multiple <p> tags in the body of my HTML. I want to display only the first two paragraphs and hide all the paragraphs that come after. However, the code I'm using doesn't seem to work as expected. <html> <head> < ...

htmlcsscss-selectors

Why can't I retrieve a token from the cookies?

After a user logs in, the application sends a request to the backend implemented with Next.js. Next.js sets cookies using res.Header(...) and then responds back to the front-end. However, I am having trouble retrieving the cookies-token from the response, ...

reactjsnext.jscookies

The content is unclipped with a border-radius and hidden overflow

As I work on incorporating stylistic text inside rounded divs, I encounter a challenge where the text touches the top of the container. While I have successfully managed to customize various content elements such as nested divs and background images, this ...

firefoxgoogle-chromeclippingcss

Uncovering the Issue with Select All Functionality in <Table/> when using Material-UI and React

When using Material-UI's <Table/> with ReactJS, a table is set up with a select all checkbox. Each time an individual row checkbox is clicked, the row id is added to the state array clickedRowIds. This allows for logging of the ids of the clicke ...

javascriptarraysreactjsmaterial-ui

Transferring data from React to Express and then sending a POST request to the API

I am facing challenges when trying to send form data from React to Express and then submit it to an API. While I have successfully managed to transfer the body from React to Express, I am struggling with posting it to the API. The GET requests from the API ...

reactjsapiexpresspostaxios

Tips for aligning a dropdown button with the other elements in your navbar

I followed the code outline from a tutorial on We3schools, but I'm having an issue with the button not aligning correctly with the navbar. I attempted to adjust the code for proper alignment before publishing, but was unsuccessful. Here is the GitHub ...

javascripthtmlcssnavbar

In ReactJS, the URL is being routed correctly but the page is failing to render

InstructorComponent.jsx import React, { Component } from 'react' import ListCoursesComponent from './ListCoursesComponent' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import CourseComponent from ...

reactjs

How can I insert a script into the head tag using Meteor and React?

Struggling to incorporate a script tag into my website, I am facing some difficulties. The guidelines recommending me to add it to the head tag of the site are proving to be challenging since I am using Meteor + React and lack any HTML pages with a head t ...

meteorreactjs

All elements in the array are being simultaneously updated with the same value in React

I am encountering an issue with my code. Whenever I draw rectangles by clicking and dragging, the new rectangle added to the array overwrites all previously stored rectangles. For example, if my array (named data) initially contains Rectangles as - [Rect ...

javascriptreactjs

Ways to resolve the issue with the Argument of type 'Date[]' not matching the parameter type '(prevState: undefined) in React

I've encountered an issue while trying to construct my project. The error message reads as follows: Argument of type 'Date[]' is not assignable to parameter of type '(prevState: undefined) Here's the excerpt of the code in questio ...

javascriptreactjstypescriptnext.js

Steps for uploading an item to an API using an Excel document

I'm facing an issue where I am trying to send a large object along with an Excel file to an API. However, only my photo is being recognized and the object is not sent, resulting in an [object Object] error. I understand that this error occurs due to i ...

javascriptreactjsnext.jsfrontend

Delegating events with .on('click') and using the CSS negation selector :not()

Struggling to implement event delegation for a dynamically added or removed class? I need to create an event for elements that are clicked, but without a specific class. Here's the code I have so far, but it doesn't seem to be working. Could it b ...

jquerycsseventsdelegationnegation

Is there a way to format this into four columns within a single row while ensuring it is responsive?

I am working on a layout with a Grid and Card, aiming to have 4 columns in one row. However, the 4th column ends up in the 2nd row instead, as shown below: My goal is to align all 4 columns in a single row. Additionally, when viewed on a small screen, th ...

javascriptreactjsmaterial-ui

No items are found in the array when attempting to add items to the cart

server I am encountering an issue where the array is empty when trying to add items to the cart. Despite suspecting that the backend, which consists of node.js, is functioning correctly (as manually adding items via URL increases the cart quantity), the fr ...

node.jsreactjsexpress

Leverage scope variables and dynamic CSS properties when using ngClass

Is there a way to manipulate the CSS dynamically in HTML using a scope variable? <div ng-class="myClassScope, { 'dynamic-class': !ifIsNot }"> ...

cssangularjsangularjs-scopeng-class

Changing the color of a Highcharts series bar according to its value

Playing around with Highcharts in this plunker has led me to wonder if it's possible to dynamically set the color of a bar based on its value. In my current setup, I have 5 bars that change values between 0 and 100 at intervals. I'd like the colo ...

javascriptcssangularjshighcharts

Unable to insert Facebook post onto a page generated by Next JS

I've been attempting to incorporate a public FB post into the main page of my application. I've been following the instructions provided by Facebook and it seems pretty straightforward. The strange thing is, it works perfectly fine when I do it i ...

reactjsfacebooknext.jsembed