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> 

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

How to properly update the dependency array in the useEffect hook when switching routes

I encountered an issue with the functional component. I am utilizing the react-router-dom package to manage routes. The scenario involves a list containing links and buttons, where clicking on a button opens a dropdown that also includes links. Whenever ...

Can the pathway of a fixed .txt document be reconfigured in Next.js?

I need some help with my Next.js application. I have a robots-staging.txt file located in the root of the public folder and I want to include it in the rewrites function within next.config. async rewrites() { const rewriteList = [ { sourc ...

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

What is the best way to link to a CSS file located in a different directory while being in a subdirectory?

For a project I am working on, I am developing a simple streaming site and have organized my files into different folders. These folders include: HTML CSS Shows Within the "Shows" folder, there is a subfolder named "Testshow". I am facing an issue with ...

Navigating through route parameters and application logic

There is an endpoint / which may receive different get parameters for oAuth and logging in to an app. A function called queryAction has been created to handle these requests. Platforms like express can route at the path level but not the res.query level, ...

Developing hybrid applications without using Angular or React

As a newcomer to Hybrid App Development, I recently created a website using core coding without frameworks like Angular or React. Now, my goal is to transform this website into a Hybrid App. However, I'm facing some lingering questions that I couldn& ...

Tips for effectively utilizing Higher Order Components with React Hooks?

What is the optimal method for utilizing HOC when needing to retrieve data from a hook? There are two approaches: Passing the data received from the hook as a parameter to the HOC HOC: export const withAuth = ( isAuth: boolean, { ComponentForAut ...

Scrolling to specific ID scrolls only in a downward direction

I have been using fullpage.js for my website and I am facing an issue. When I create a link and connect it to an id, everything works perfectly. However, I am unable to scroll back up once I have scrolled down. Here is the HTML code: <a href="#section ...

I've encountered an issue with react-responsive-carousel not functioning properly with server-side rendering (SSR) in NextJs. Can anyone provide an example of how to enable SSR for this component

I'm currently working on a project involving e-commerce and need to retrieve product details data via SSR to display it on the screen. Everything is showing up correctly except for the product images. I'm using the react-responsive-carousel compo ...

Menu Selector on the Right Side

I am currently working on a drop down menu and trying to align it to the right using HTML and CSS. Below is an example that I have been referencing: http://codepen.io/anon/pen/RNLmvq Attached here is a screenshot of how the menu appears without the text ...

Adjusting the height of the navbar items to align with the size of the

In the bootstrap navbar below, I am trying to enlarge the search field to be large using 'input-lg', but this causes the other items in the navbar not to vertically center correctly. How can I align the other items in the navbar with the large in ...

Creating a portal in React.js can be achieved by utilizing the createPortal method from ReactDOM. This process involves transforming code from

Currently, I am in the process of converting my next.js code to react.js and I have encountered a new challenge. I am using portal for the first time and require some assistance on where exactly I should place the <div id="photo-picker">< ...

I am looking for a way to create a fixed bottom navbar that evenly spreads out the links across the entire width of the screen. It should also be responsive

:) I'm experimenting with my fixed bottom navbar in bootstrap.. It's working to some extent.. But unfortunately, the links in my navbar won't justify.. I've tried everything I can think of.. I want it to be responsive so the current ...

Guide to displaying WordPress functions within an accordion in my loop

Currently, I'm working on implementing a vertical accordion feature that will display blog posts within each section. The idea is to have 5 of the most recent posts displayed in the accordion, with each post showing the date (day/month/year) and title ...

The offspring surpasses the parent's limits and extends beyond its

I am designing a webpage layout that includes 2 navigation bars (top), a top-graphic (middle) flexbox, and a content flexbox (bottom). Within the top-graphic flexbox, I want to add a black box for text. However, I am facing issues with the box overflowing ...

A problem arises in Next.js when CSS is not rendering properly during Server Side Rendering

After creating my next.js application using the command npx create-next-app, I realized that the styles from the imported .css files are rendering correctly on Client Side Render but not on Server Side Render. The Next.js documentation states that importe ...

Strategies for extracting data from multiple Textareas in React

I am facing an issue with a form that contains multiple textarea elements (specifically 3). The problem is that when I type in one textarea, the content is automatically filled and updated in the other textareas as well. This behavior is not desired. I h ...

Utilize axios-cache-interceptor to enforce caching of responses from axios

Is it possible to configure axios to always return a cached response with the help of axios-cache-interceptor? import axios from 'axios' import { setupCache } from 'axios-cache-interceptor' const axiosInstance = axios.create({ timeou ...

Form fields do not pass validation when accessed via mobile devices

ISSUE: Successful form validation and async requests on desktop, but not functioning properly on mobile devices. TECHNOLOGY USED: Implemented nextjs, formik, and yup for the solution. DESCRIPTION: Developed a user-friendly form submission site that oper ...

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 ...