Leveraging Flexbox and flexGrow in conjunction with Textfield

I am looking to use Flexbox to separate my components on the screen in a way that positions them correctly. I have 3 rows with textfields that need specific ratios related to the full width:

  • row 1 : 2, 1, 1
  • row 2 : 1, 1
  • row 3 : 1, 1, 2

I attempted to achieve this using flexGrow and the width of the Box component but was unsuccessful.

Expected result: https://i.sstatic.net/JYZVa.png

Current result: https://i.sstatic.net/TFl0e.png

The code I used is as follows:

<Box display="flex" p={1} bgcolor="background.paper">
    <Box m="0.5em" width={"50%"} bgcolor="grey.300">
        <TextField value="Half" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"25%"}  bgcolor="grey.300">
        <TextField value="Quarter" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"25%"} bgcolor="grey.300">
        <TextField value="Quarter" fullWidth></TextField>
    </Box>
</Box>

<Box display="flex" p={1} bgcolor="background.paper">
    <Box m="0.5em" width={"50%"} bgcolor="grey.300">
        <TextField value="Half" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"50%"}  bgcolor="grey.300">
        <TextField value="Half" fullWidth></TextField>
    </Box>
</Box>

<Box display="flex" p={1} bgcolor="background.paper">
    <Box m="0.5em" width={"25%"} bgcolor="grey.300">
        <TextField value="Quarter" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"25%"}  bgcolor="grey.300">
        <TextField value="Quarter" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"50%"} bgcolor="grey.300">
        <TextField value="Half" fullWidth></TextField>
    </Box>
</Box>

Is there a solution to properly align the textfields?

cssflexboxmaterial-ui

Answer №1

Consider the margin provided by each flex item in your calculations.

Assuming:

ROW <Box/> container width = 768px
ROW <Box/> container left+right padding = 16px
font size = 16px
margin 0.5em = 8px

for ROW 1

number of box elements (flex items) = 3
total left+right margins of elements = 3*(8*2) = 48px
leftover content width = 768px - 48px - 16px = 704px
element 1 with 50% width = 704*0.5 = 352px
element 2 with 25% width = 704*0.25 = 176px
element 3 with 25% width = 704*0.25 = 176px
combined width of element 2 and 3 = 352px

for ROW 2

number of box elements (flex items) = 2
total left+right margin of elements = 2*(8*2) = 32px
leftover content width = 768px - 32px - 16px = 720px
element 1 with 50% width = 720*0.5 = 360px
element 2 with 50% width = 720*0.5 = 360px

comparison between ROW 1 element 1 width VS ROW 2 element 1 width = 352 < 360

To address this issue, you can assign more width to specific <Box/> elements

<Box display="flex" p={1} bgcolor="background.paper">
  <Box m="0.5em" width={"50%"} bgcolor="grey.300">
    <TextField value="Half" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"25%"} bgcolor="grey.300">
    <TextField value="Quarter" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"25%"} bgcolor="grey.300">
    <TextField value="Quarter" fullWidth></TextField>
  </Box>
</Box>

<Box display="flex" p={1} bgcolor="background.paper">
  <Box m="0.5em" width={"50%"} bgcolor="grey.300">
    <TextField value="Half" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"calc(50% + 1em)"} bgcolor="grey.300">
    <TextField value="Half" fullWidth></TextField>
  </Box>
</Box>

<Box display="flex" p={1} bgcolor="background.paper">
  <Box m="0.5em" width={"25%"} bgcolor="grey.300">
    <TextField value="Quarter" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"25%"} bgcolor="grey.300">
    <TextField value="Quarter" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"calc(50% + 2em)"} bgcolor="grey.300">
    <TextField value="Half" fullWidth></TextField>
  </Box>
</Box>

While this is a solution, using Grid would be preferable as it allows for better control over responsiveness using props like xs, lg, etc.

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

Using CSS to add a resize handle and implement mouse events in Chrome

While experimenting with the resize property in CSS, I encountered an issue. I have a div that contains a canvas element. .resizable { resize: both; overflow: hidden; border: 1px solid black; } div { height: 300px; wi ...

css

Get rid of the arrow that is displayed when using the `time` input type in HTML5

Recently, I encountered an issue with the default HTML5 code snippet. My custom background looked perfect except for a pesky black arrow appearing on the right side. In this image, you can see the problematic black arrow that needs to be removed. I attemp ...

javascriptcsshtmlinputtime

What causes the iconComponent in Select to appear below the input line?

In an attempt to replace the default caret, I utilized a custom in-house component that renders an SVG icon. However, when the caret isn't displayed, my icon ends up on the line below the input field, overlapping with the hint text. Here is the code ...

material-ui

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

javascriptjquerycssimage

Creating eight equal sections within HTML <div> elements using Bootstrap

I am brand new to Angular. I need to design something like this: https://i.sstatic.net/Zcb9i.png However, I'm struggling to find the right solution. Here is what I have so far: https://i.sstatic.net/7hsrk.png. Having been a backend developer, I&ap ...

htmlcssangularbootstrap-5

Text in SVG vanishes when label size increases

I've been exploring Morris.js for creating charts, which relies on SVG to generate graphs. I've shared a JSbin setup here: JSbin example One challenge with Morris.js is the X-Axis labels disappearing when they are too large. Adjusting the size o ...

cssgraphsvgchartsmorris.js

Tips on adjusting the SVG view box for optimal visibility in a web browser

Recently, I've encountered an issue with the following code snippet: d3.xml("https://crossorigin.me/https://svgshare.com/i/5w9.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.docume ...

csssvg

Image input not working in Internet Explorer

While the button displays correctly in Chrome and Firefox, it appears differently in IE: To address this issue in IE, you may need to make adjustments to the CSS styles specifically for that browser. One potential solution could involve creating a separat ...

htmlcsswordpressinternet-explorer

Issue with Material-UI AutoComplete: Values not loading until the second click

Within my React application, I am facing a challenge involving 3 dropdown lists. The first dropdown contains primary values (e.g., a, b), and the next dropdown will filter the array values based on the selection made in the first dropdown. I am utilizing M ...

node.jsreactjsmaterial-ui

Jquery and CSS3 come together in the immersive 3D exhibit chamber

Recently, I stumbled upon an amazing 3D image gallery example created using jQuery and CSS3. http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/ Excited by the concept, I attempted to incorporate a zoom effect (triggered every time a user clic ...

javascriptjquerycss

Stepper wizard experiences a variation in CSS styling when minified

Two plunkers showcasing material design wizard selectors are causing different behavior upon stepper clicks. One uses a minified version of CSS while the other is expanded. The issue arises with the transition effects in the .step-wizard .progressbar class ...

javascriptjqueryhtmlcss

Prevent event propagation when a CSS pseudo-element is active

In my project, there are two elements: .parentElement and .childElement. Both have the :active implemented to appear darker when pressed. The .childElement is nested inside the .parentElement. I am looking for a way to prevent the .parentElement:active fr ...

htmlcsspseudo-class

Cypress encountering occasional issues with Material UI dropdown functionality

I have experimented with various methods, but it doesn't consistently work. While it is able to locate the element and click on it, it often fails to populate the dropdown input field with the desired value. This poses a challenge for continuing the t ...

material-uicypressdropdown

Increase the div id using jQuery

I've got this code snippet here and, oh boy, am I a newbie. How can I increase the number in the div using a jQuery script? if($res >= 1){ $i=1; while($row = mysqli_fetch_array($qry)){ echo "<div clas ...

javascriptjqueryhtmlcss

Using JavaScript to apply styling on images with overlays

I am currently facing an issue with placing an overlay on top of a background image. Despite my efforts, I am unable to get the background color to appear on top of the image. Any helpful suggestions on how to resolve this would be greatly appreciated. M ...

javascriptcssreactjsmaterial-ui

Struggling to get the hang of CSS animation?

Here is a code snippet that I am using: //Code for animating skills on view document.addEventListener("DOMContentLoaded", function(event) { function callback(observations, observer) { observations.forEach(observation => { if (observati ...

javascripthtmlcssioscss-animations

Combining an image and a link in HTML CSS: Tips for stacking elements on top of each other

I am currently working on adding a hyperlink to an image, so that when the image is clicked it will navigate to the specified link. However, I am having trouble with the formatting of the hyperlink as it is appearing smaller than the actual image. Below ...

htmlcss

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

Embed JavaScript code within the Material-UI components

I am working with the material-ui ListItemText: <ListItemText primary={<div> <Table className={classes.table}> <TableRow> <TableCell width="40">{item.issue_state}</TableCell> <TableCell width="40">{ ...

javascriptnode.jsreactjsmaterial-ui

Is it frowned upon or considered incorrect to achieve a horizontally centered page by adjusting the CSS properties of the html tag?

Is it considered wrong or frowned upon to center a webpage horizontally by adjusting CSS properties of the HTML tag? Sample CSS code: <style type="text/css"> html { width: 1200px; margin: 0px auto; background-color: ...

css