Tips for creating a textfield with height that responds dynamically in Material UI

I am trying to create a textfield with a responsive height that adjusts itself based on the size of its parent grid when the browser window is resized. I have been searching for a solution and came across this helpful post on Stack Overflow about creating a Responsive MaterialUI TextField. However, the solution provided in the post only addresses the width issue, not the height.

Here is the code I currently have:

const useStyles = makeStyles({
infogrid: {
    width: '30%',
    height: '39%',
    display: 'inline-block',
    position: 'absolute',
    right: '8%',
    top: '10%',
    backgroundColor: '#00ffff',
    borderRadius: '5vh',
    alignItems: 'center',
    justifyContent: 'center',
    justifyItems: 'center',
    flexDirection: 'column',
    overflow: 'auto'
  },

label: {
    margin: '25%',
    marginTop: '0.3%',
    marginBottom: '0.3%',
    display: 'block',
    height: '9%',
    width: '50%',
    
  }
})


export default function App() {

  const  classes = useStyles()
  
  <Grid className={classes.infogrid}>
     
      <TextField fullWidth className={classes.label} id="ovalID" label="1" variant="outlined" />
      <TextField fullWidth className={classes.label} id="latitude" label="2" variant="outlined" />
      <TextField fullWidth className={classes.label} id="longitude" label="3" variant="outlined" />
      <TextField fullWidth className={classes.label} id="ovalRadius1" label="4" variant="outlined" />
      <TextField fullWidth className={classes.label} id="ovalRadius2" label="5" variant="outlined" />
      <TextField fullWidth className={classes.label} id="angel" label="6" variant="outlined" />

     
      </Grid>
 );  
}

Answer №1

To ensure responsiveness, enclose all content within your <Grid> in a <Stack> component.

Illustration

<Grid>
  <Stack>
    <TextField />
    <TextField />
    <TextField />
    <TextField />
  </Stack>
</Grid>

This structure will adjust the height of your TextField to be responsive within the grid elements.

Answer №2

After some experimentation, I managed to resolve the issue by converting the parent grid into a div and updating its display property to 'flex'. Additionally, I adjusted the marginTop and marginBottom values within the 'labels' class to provide more spacing.

This solution works effectively as long as the flex direction of the parent div is specified as 'column'.

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

Tips for aligning 2 columns when both table cells contain inner tables

Concerning my HTML table, cells #3 and #4 contain inner tables. I am facing an issue with aligning the rows within each table in cell #3 and cell #4 properly. Sometimes, the length of text in a row exceeds a single line, causing misalignment with the othe ...

Why should I set the width of the header to be larger than the body in order to fully cover it?

I've set my header width to 106% to span the entire page length, while the max-width for my body is kept at 95%. body { background-color: #333; max-width: 95%; font-family: ivyjournal, sans-serif; margin: 0; padding: 0; overflow-x: hidd ...

List items out of place because of CSS incompatibility in Firefox and Chrome

After creating a list of names displayed in an <ul>, I implemented some CSS styling only to encounter browser-specific issues. In Chrome: The list element is shifted by one row. In Firefox: All list items are collapsing into one item. Here&apo ...

Unable to apply 3rd condition with ngClass into effect

I've been attempting to incorporate a third condition into my ngClass. Initially, I managed to get two classes working in my ngClass to change the row colors alternately. [ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}" Now, I'm trying to introdu ...

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

Changing Tailwind CSS variables for customization

Using Variables in index.css : :root { --property: 1; } A Different Approach to Changing it with CSS on Hover: img{ transform: scale(var(--property));; } .another-element:has(:hover, :focus) { --property: 1.1; } There's a way to inclu ...

Error occurs when passing an array of objects to the useHook function in downshift-js

After following the basic-usage in downshift-examples, I made a modification by changing the array of items to display in the dropdown. Instead of using starwars (an array of strings), I utilized an array of objects with properties like Id: 1 and Descripti ...

Session is being established by Express/Passport, however, the cookie is not being transmitted to the

Currently, I have a project running with React on the client side and Node.js on the server side. Client side (React app) - http://localhost:3000 Server side (Node.js) - http:..localhost:5000 My focus at the moment is on implementing user authentication ...

What steps can be taken to resolve the issue of CORS in react spring boot integration?

I have implemented a CORS filter class in my Spring Boot application: @Component public class CorsingFilter { @Bean public CorsFilter corsFilter() { final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); ...

React - Customize MUI Data Grid with Sleek Scrollbars for Free (See Demo in Code Sandbox)

Does anyone have any tips on how to improve the appearance of MUI grid scrollbars? I've attempted wrapping MUI grid in custom scrollbars like react-scrollbars, but it hasn't worked out for me. Since that approach didn't work, I'm now t ...

Set the background image width to 75% of the screen size

I want to use this image https://i.sstatic.net/gt30c.jpg as a background for a section on my page. My preference is to have the white part cover only 75% of the screen, stopping before reaching the content in the left grid. Is it possible to achieve this ...

Use jQuery to place the initial 3 elements within a div

Currently, I am dynamically pulling content into li elements using ASP.NET. My goal is to wrap a specific div class around the first 3 li items in the list only. Here is an example: <ul class="wrapper"> <div cl ...

Is Reactfire still using mixins even though they are deprecated?

As I navigate through the reactfire github repository, I notice that they are using mixins. I was under the impression that mixins were deprecated. Am I out of touch with the latest updates? ...

Tips for preventing real-time changes to list items using the onchange method

I am facing an issue with a list of items that have an Edit button next to them. When I click the Edit button, a modal pops up displaying the name of the item for editing. However, before clicking the save button, the selected item in the list gets changed ...

Utilize the identical ReactJS hook across multiple components

I've created a hook that pulls data from an API and stores the result in my component's state using setAllCommunitiesFromSponsor. Now I want to use this same hook in another component. Instead of copying and pasting, what is the best way to imp ...

Unable to load data: Error message "No output after rendering"

Having trouble rendering a fragment from another file into App.js. Can't seem to pinpoint the issue. Why is this not working? It was functioning fine in a previous project with the exact same setup. Is there a new syntax or am I missing something obv ...

Unusual occurrences observed with table cell padding in CSS

When I include a TD padding in my CSS like this: #maincontent table td, #maincontent table th { padding: .333em 0 .333em .25em; } In Safari and IE, the padding is applied correctly to the TD, but not in Firefox. If I apply the TD padding only to th ...

Step-by-step guide on programmatically closing the Material-UI DropDownMenu

http://www.material-ui.com/#/components/dropdown-menu Having encountered a styling issue, I was compelled to rearrange the order of components within my material-ui DropdownMenu. Nevertheless, some buttons (renderNavLink) are now failing to close the Dro ...

Adding a Scrollbar to an Extensive Organizational Chart Made with react-d3-tree

Utilizing the react-d3-tree library, I have successfully implemented an organizational chart (org chart) within my React application. The org chart functions well with smaller datasets, but as the organization expands, I am encountering the challenge of ac ...

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...