The customized icon in the Material UI Select component lacks proper vertical centering

Check out this demo link where the dropdown icon is currently not vertically centered. It appears to have extra top padding due to the class "tlm-dropdown-icon", causing it to be off-center. I've tried inspecting the element but couldn't find any related padding or margin settings that would explain the issue. I'm unsure why the icon has this additional space at the top.

top: 50%;
transform: translateY(-50%);

These CSS properties don't seem to be resolving the problem.
Appreciate any assistance!

cssreactjsmaterial-ui

Answer №1

By setting the extrinsic height of the icon element to a small number, it is causing overflow and pushing it down. To resolve this issue, simply remove the height property or set it to auto in your custom icon styles so that the element can resize itself accordingly:

height: auto;
top: 50%;
transform: translateY(-50%);

Another solution is to use flexbox and vertically align the element:

height: 100%;
display: flex;
align-items: center;

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

Is it possible to implement the ::selection Selector in Material-UI?

Is it possible to change the background color of a selected list component in Material-UI using the ::selection selector? See the code example below: import React from 'react'; import { makeStyles } from '@material-ui/core'; import List ...

reactjsmaterial-uimaterial-design

Is the order of execution of extraReducers before or after the reducers?

I was curious about the createSlice function in redux-toolkit and how it handles the order of execution for extraReducers compared to reducers. Can we determine if the extraReducers are executed before or after the reducers, or is the order indeterminate? ...

javascriptreactjsreduxreact-reduxredux-toolkit

Deactivate interactive functions on the mat-slider while preserving the CSS styling

I'm attempting to create a mat-slider with a thumb label that remains visible at all times. Below is my mat-slider component: <mat-slider class="example-margin" [disabled]="false" [thumbLabel]="true" [tickInterval]="tickInterval" ...

javascripthtmlcssangularangular-material2

Utilize a function from another component

Is there a way to access a function inside main.js using a button in navbar.js to open a drawer that is located within the main.js component? Do I need to utilize Redux for this task? <Navbar /> <main /> navbar.js <Button type="default ...

javascriptreactjs

Updating a List Conditionally in React

Hello there! I am relatively new to the world of React and currently trying to grasp the concept of modifying elements within a list. Below, you'll find a straightforward example that illustrates my current dilemma. const numbers = [1, 2, 3, 4, 5]; / ...

javascriptreactjs

Unexpected behavior observed with Mui theme breakpoints

I have defined breakpoints for my MUI React-based app like so export const lighttheme = createTheme({ palette: palette, typography: typography, breakpoints: { values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536, ...

cssreactjsmaterial-uibreakpoints

Tips for eliminating the paddingRight in a MUI Drawer when it is opened

I'm facing a simple issue that I can't figure out how to solve. Every time the MaterialUI Drawer is opened, it adds some CSS styles to the body of my page. One of these styles includes a padding-right property which is causing alignment problems ...

reactjssassmaterial-ui

What is causing this error to appear in Next.js? The <link rel=preload> is showing an invalid value for `imagesrcset`

I've got a carousel displaying images: <Image src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props[organizationId].events[programId].imgId}_0.cover.jpg`} className={styles.carouselImage} layout="responsive" width={865} ...

javascriptcssnext.js

CSS positioning with absolute value + determine the number of elements positioned above

Is it feasible to adjust the position of an absolutely positioned element based on the height of the element above it? The objective is to align elements with the class "pgafu-post-categories" one line above an H2 heading, even when the lengths v ...

javascripthtmljquerycss

Identifying touchscreen capability through media queries

Is there a secure method, utilizing media queries, to trigger an action when not using a touchscreen device? If not, would you recommend opting for a JavaScript solution like !window.Touch or Modernizr? ...

csstouchmedia-queries

React Native's Table Sorter Component

Can anyone recommend a reliable way to display numerical data in a sortable table using React Native? I have come across react-native-data-table, but I'm unsure about using it due to its dependency on listView which is no longer supported. Any altern ...

reactjsreact-nativereact-native-ios

The geocoder-autocomplete feature in ReactJS is now experiencing a sudden Network Error in Firefox

I followed the tutorial provided by HERE and successfully implemented the solution for street address validation using ReactJS and HERE geocoder autocomplete. Everything was working fine on Firefox and Chrome until a few weeks ago when it suddenly stopped ...

reactjsaxioshere-apihere-autocomplete

The setting of background-size: cover does not affect the height of the background image

Looking for a solution to make a background image fill a div entirely? Here is the CSS code you can use: .class{ background-image: url('img.jpg'); background-repeat: no-repeat; background-size: cover; } You can implement this within t ...

htmlcsszurb-foundation

The React JSX error you encountered is due to the missing return value at the end of the arrow function

After implementing my code, I noticed the following: books.map(({ subjects, formats, title, authors, bookshelves }, index) => { subjects = subjects.join().toLowerCase(); author = authors.map(({ name }) => name).join() ...

javascriptreactjs

Passing state from a parent component to a child component and then down to subsequent child components through props in React.js

Currently, all the data is static information. I am using a parent state which is an array containing 4 objects: function App(){ const [searchResults,setSearchResults] = useState([ { name: 'name1', artist: 'artist ...

javascriptreactjsreact-hooks

Error encountered during conversion to Typescript for select event and default value

When trying to set the defaultValue in a Select component, TSlint throws an error - Type 'string' is not assignable to type 'ChangeEvent<HTMLInputElement> | undefined - for the code snippet below: const App = () => { const [ mont ...

reactjstypescriptantdreact-hooks

Instructions for retrieving data from a weather API using JavaScript

Hello amazing Stackoverflow community! I need your help to figure out how to extract data from a weather REST API using JavaScript. I'm struggling to fetch the weather condition and date/time information from this API. { info: { _postman_i ...

javascripthtmlcssnode.js

What is the solution to the error message: "Expected a function for the onChange listener, but received a string value instead in the @uiw/react-md-editor for NextJS 13"?

In my Next.js 13 application, I have integrated @uiw/react-md-editor as a markdown editor. One of its features is the ability to preview markdown using MDEditor.Markdown. However, I encountered an error that stated: Warning: Expected onChange listener to ...

reactjsnext.js

Material-ui datepicker experiences issues when the primary color is altered causing a crash

Currently, I am utilizing the material-ui/pickers library for implementing a datepicker, but encountering an exception as follows: "https://i.stack.imgur.com/TFsJb.png After investigating the problem, it became apparent that overriding the primary a ...

reactjsmaterial-uimaterialdatepicker

Ensure that the mask implemented in the form input only shows two decimal places, while simultaneously retaining the original value

Is there a way to format a number in a form input so that it displays only two decimals while still retaining the original value? This is necessary to avoid incorrect values down the line and meets the customer's requirement of showing no more than tw ...

jqueryhtmlcssformsinput