"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

I'm encountering an issue with VUEJS components including my show route in their get call. How can I make my journals/:id pages function properly without encountering a Mime

I encountered a MIME type error stating: Refused to apply style from 'http://localhost:8080/journals/assets/css/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. ...

javascripthtmlvue.js

Why is the option value not visible in the dropdown selection list?

On my website, I am trying to use a date range to aggregate data from MySQL and display it based on the selected time frame. However, I am facing an issue where the values for each option in the drop-down menus are not showing up. Below is the PHP code I a ...

phphtmlmysql

Tips for showing placeholder text on Safari

I'm having an issue with the placeholder attribute in Safari. It seems to be working fine in all other browsers, but not in Safari. <textarea class="concerncommentArea" placeholder="Place your comment here"></textarea> Does anyone know h ...

javajqueryhtmlsafari

Show data from a Mysql table column in a dropdown menu

I am trying to show the values from a MySQL table field in a select box. I attempted the code below but it only displays the specified field values in the echo function and not in the select box. I'm unsure where I made a mistake. $con = mysql_conne ...

phphtmlmysql

What is the best way to implement debouncing for an editor value that is controlled by the parent component?

Custom Editor Component import Editor from '@monaco-editor/react'; import { useDebounce } from './useDebounce'; import { useEffect, useState } from 'react'; type Props = { code: string; onChange: (code: string) => void ...

javascriptreactjstypescriptdebouncing

How to pass the checked state of a checkbox in React to the parent component?

Within my component, I have a clickHandler that I want to use to pass state to the parent component of the checkbox. However, I am unsure about how to access this state from the checkbox component. FIDDE: https://jsfiddle.net/kirkbross/7km493bd/4/ The co ...

reactjsstate

CSS: adjusting styles for different screen sizes on both desktop computers and smartphones

While diving into Emacs, I am in the process of creating a website called Prince. The layout of columns is controlled by the directives below: body { font-family: var(--s-font-family); font-size: var(--normal-font-size); column-count: 3; c ...

htmlcssmedia-queries

The `.append()` function includes HTML content as plain text

I am using JavaScript to dynamically add HTML elements to my webpages. I have created a loop that iterates through all the projects, each containing multiple pictures. The first step involves generating the project title and adding it within a div element ...

javascriptjqueryhtmlappend

Utilizing an external SCSS or CSS file with Material UI in React: A step-by-step guide

Encountering issues with external CSS files in my React project that uses Material UI components. Despite creating a CSS file for each component in the react components folder, they fail to load upon hard reloading the site. I prefer using external CSS ov ...

cssreactjsmaterial-uistyles

Updating the JSON format output from snake case to camel case in a React web application

Modifying JSON output in a React Web app to change keys from snake case to camel case Currently, the API endpoint response is structured like this: [ { "id": 1, "goals_for": 0, "goals_against": 0, "points": 0 } ] ...

javascriptjsonreactjsnpm

What is the best way to split a jQuery tab into four equally sized divs?

I am currently working with jquery tabs and within one of the tabs, I have 4 google charts each enclosed in a separate div. My goal is to position each div in a different quadrant of the tab area (north, south, east, and west of the screen). Currently, my ...

jqueryhtmlgoogle-visualizationjquery-tabs

Implementing Bootstrap tooltips in content that can be scrolled

I need help with positioning two containers, which you can view in this FIDDLE. Both containers may contain a lot of content, so I have applied overflow: auto to both of them. This is the HTML structure: <div id="maincontainer"> <d ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for concealing a div using an article until it is activated by hovering over it

I am looking to incorporate a sleek sliding animation on an article that reveals more information in a div upon mouseover. A great example of this can be seen on where clicking at the top right corner triggers the "Show Modern Dev Ad" feature. Below is m ...

javascriptcsshtml

Using the React JS useState hook to toggle the state of a JSON object containing an array when a checkbox is clicked

When I submit my state as a stringified variable from a form to a POST request via a lamda server, it gets parsed and sent to sendgrid for templating. To loop over specific parts (multiple checkboxes) in JSON format, each with the same key but different va ...

javascriptjsonreactjshandlebars.jsreact-hooks

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

javascripthtmlgwttampermonkey

React Drawer triggering excessive re-renders

I am trying to implement a button that, when clicked, will display a Drawer from the bottom. Here is the code snippet I have written: import * as React from "react"; import Box from "@mui/material/Box"; import Drawer from "@mui/mat ...

reactjsmaterial-ui

apply CSS to highlight a clicked div as if it were a radio button

Is it possible to use CSS to highlight a div when clicked (when the div is acting as a label for a radio button)? Here is my code: <?php foreach ($images as $image) { ?> <input type="radio" name="id" value="<?php echo $image['id& ...

phpjqueryhtmlcss

What is the best way to make a message appear only when the browser screen is smaller?

I am struggling to make a message appear only when the screen is resized. It's puzzling me why my current approach isn't yielding the desired result. Instead of displaying the message only on a shrunk screen, it shows up all the time. I can confi ...

htmlcss

Implementing Enter key functionality to add items to a Todo list using pure DOM manipulation

var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...

javascripthtmlcss

Exploring the Pathways of a Website's Architecture

Recently, I stumbled upon a website that piqued my interest. I am looking to send POST requests to it and then retrieve the HTML code from subsequent GET requests. Is there a way for me to uncover the organization of these routes? My plan is to perform m ...

htmlpython-3.xroutes