What is the best way to position this material-ui select list at the bottom of the input block for proper alignment?

My material-ui select build is working fine overall, but I'm looking to align the top line of the select list with the bottom line of the input block. Any ideas on how to achieve this?

This is my code:

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit
  }
});

<FormControl className={classes.formControl} fullWidth={true}>
  <InputLabel htmlFor="deviceSource-native-select">Device source</InputLabel>
  <Select
    native={true}
    onChange={this.onDeviceSourceChange}
    inputProps={{
      id: 'deviceSource-native-select',
      name: 'deviceSource'
    }}
  >
    <option value={'Ten'}>Ten</option>
    <option value={'Twenty'}>Twenty</option>
    <option value={'Thirty'}>Thirty</option>
  </Select>
</FormControl> 

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

https://i.sstatic.net/7JRoe.png

Answer №1

If you're experiencing issues, I've created a CodeSandbox demonstrating the problem: Take a look here

It seems that by using native={true}, the appearance of your select dropdown is determined by specific browser implementations. Unfortunately, there's not much you can do to alter this.

However, if you're open to using a non-native select, you can achieve the desired display by adding the following prop to your Select component:

MenuProps={{
  getContentAnchorEl: null,
  anchorOrigin: {
    vertical: "bottom",
    horizontal: "left"
  }
}}

I've also provided a modified version of the CodeSandbox mentioned above with the select set to non-native and the additional prop applied: Check it out here

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

Displaying the price on a React app upon clicking the button - A simple guide

I am currently exploring React and facing an issue. I would like the price (cena) to only be displayed when the "Oblicz" button is clicked. https://i.stack.imgur.com/P0NXi.png This section contains the code for showing the price. function CalculatorPrice ...

I encountered an issue where the font awesome icons failed to load on my website

My website is experiencing an issue where all the Font Awesome icons are not displaying despite having added Font Awesome. Here is the link to my site: https://i.stack.imgur.com/RcNtv.png .login-top .lg-in::before { font-family: "Fontawesome"; ...

Using jQuery to submit data via POST method without having the page reload

I have a link in the footer that, when clicked, jumps to the header with a # in the address bar. Is there a way to prevent this and stay in the footer? Here is the code snippet: <a href="#" class="clickIn" id="1" attrIn="Like"><span style="color ...

Overflow causes flexbox to become unreactive

Implementing the overflow style on a flexbox element appears to negatively impact its responsiveness. Here is the corresponding code snippet: .projects-wrapper{ display: flex; flex-wrap: wrap; justify-content: center; text-align: center; width ...

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

Guide to creating intricate animations using a CSS/JS user interface editor

Is there an easy way to create complex animations without blindly tweaking keyframes? I'm searching for a tool or editor that can generate the necessary animation code, similar to this example: https://codepen.io/kilianso/pen/NaLzVW /* STATE 2 */ .scr ...

Troubles arise when attempting to utilize yarn for my projects

Whenever I enter the command yarn start in the terminal, I get this output: yarn run v1.22.4 $ react-scripts start 'react-scripts' is not recognized as an internal or external command, operable program or batch file. error Command fai ...

The trick to organizing an array in useSelector() without triggering endless re-renders

I'm currently attempting to display a sorted list of anecdotes by utilizing useSelector() within the Redux framework for this exercise in my current course. However, every time I try to access the anecdotes from the state, I consistently encounter th ...

The catch block is triggered when the dispatch function is called within the try block

It's strange how the code below works perfectly without any errors and records a response once the loginHandler() function is triggered. However, when I include the dispatch function inside the try block after receiving the response, the catch block e ...

Displaying elements above my React sidebar

I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...

Passing multiple functions to child components in ReactJS as a single prop

I am utilizing the technique of passing multiple functions as individual props from the parent component to its child components. Everything is working correctly without any errors or problems, but I'm interested in exploring if there is a more effici ...

Is it possible to dynamically change the primary and secondary color of the Material UI theme palette during runtime?

Our application has default theme palette colors, but for white labeling purposes, I retrieve the theme primary and secondary colors from an API. Is there a way to update these colors at runtime after receiving the values from the API? I am using the MUI ...

NextJS does not support styling with SwiperJS

I've integrated SwiperJS into my NextJS project. Despite following the Swiper Tutorial Documentation exactly, I am encountering an issue with styling classes like .swiper, .swiper-slide, etc. My custom styles are not being applied as expected. In my ...

Improving React app with Material UI v5 update

I've recently decided to upgrade Material UI from version 4 to version 5 in my React application. Currently, I am using React version 17.0.2. Initially, I tried using the codemod for the upgrade process, but encountered numerous unexplained errors. As ...

Utilizing the React library in Ruby on Rails for dynamic and interactive

With my expertise in Ruby, I made the choice to embark on the journey of developing a web application using RoR. To enhance the front-end of my project, I opted for React since I didn't come across a suitable front-end framework for RoR. This decision ...

Tips for creating scrollable containers inside a single column?

My current project involves creating an app with Flutter, but I've run into a problem: I'm working on a layout that consists of two Containers within a column. The first Container has a fixed height of 40% of the screen, while the second Contain ...

changing the visible style of a div element using JavaScript

I'm having an issue with a link on my webpage that is supposed to show or hide a <div id="po" style="display:none;">some html</div> element. The first time I click the link, the div displays properly. However, after tha ...

The behavior of the input in React-bootstrap-daterangepicker is acting strangely

I'm encountering an issue while trying to integrate react-bootstrap-datepicker with input fields. The problem arises when I click on one of the inputs or press a key, causing the calendar to toggle (showing if hidden and vice versa). To reproduce this ...

What is the best way to set up a clickable image without making the entire div clickable?

Is it possible to make just a specific image clickable within a div without making the entire div clickable? I have an image inside an anchor tag and a surrounding div that is clickable. The issue is that the entire space around the first image, .home, is ...

How Keyof can render an object undefined and prevent accurate verification

Encountering TS2532 error: Object is possibly 'undefined' while attempting to access an object's value by dynamically selecting the key. TypeScript seems to be restricting me from checking the field values, and I'm unsure of the underly ...