What's causing these divs to be misaligned in various directions?

I am currently working with a front-end framework based on flexbox called Material-UI, and I have noticed that the layout of certain components, particularly the quantity control elements, appears to be different even though they all share the same styling and code.

Here is an example: https://i.sstatic.net/mbOmK.jpg

I believe this issue is related to the flexbox model rather than being a problem with Material UI. Any insights on what could be causing this discrepancy? Please note that all styling is applied inline.

Code Sample

Below is the code snippet for each <Card>, where each card receives a listing as a prop containing the necessary data for rendering:

<Card style={{ display: "flex", height: "13em" }}>
  <CardMedia title={listing.productTitle}>
    <img src={listing.mainImgUrl} style={{ width: "13em" }} />
  </CardMedia>
  <Box display="flex" flexDirection="column">
    <CardContent style={{ flex: "1 0 auto" }}>
      <Typography component="h6">{listing.productTitle}</Typography>
      <Typography variant="subtitle1" color="textSecondary">
        by {listing.creatorUsername.length > 16 ? `${listing.creatorUsername.substring(0, 13)}...` : listing.creatorUsername}
      </Typography>
    </CardContent>
    <Box display="flex" alignItems="center" justifyContent="flex-end" mb={1}>
      <Box display='flex' alignItems='center'>
        <Box mr={2}>
          <Typography variant='body2'>${localQuantity * listing.price}</Typography>
        </Box>
      <Select
        name="quantity"
        value={localQuantity}
        onChange={handleChange}
        variant="outlined"
        disabled={disabled.quantity}
      >
        {getQuantityOptions(listing.numAvailable)}
        </Select>
      <IconButton>
        <DeleteOutline />
      </IconButton>
      </Box>
    </Box>
  </Box>
</Card>

Your assistance is greatly appreciated!

javascriptcssreactjsflexboxmaterial-ui

Answer №1

To achieve a 100% width for the Box following the card content, you can utilize margin-left:auto on the initial element inside to align it to the right. It's tricky to accurately predict without being able to execute the code :)

Answer №2

After encountering layout issues with the <CardContent> tag, I decided to switch it out for a different approach. Here is the solution I came up with, using <Box> elements instead (essentially functioning as straight <div>s):

       <Card style={{ display: "flex", height: "13em" }}>
        <CardMedia title={listing.productTitle}>
          <img src={listing.mainImgUrl} style={{ width: "13em" }} />
        </CardMedia>
        <Container>
          <Box mt={2}>
            <Box display="flex" alignContent="flex-start">
              <Box display="block">
                <Typography component="h6">{listing.productTitle}</Typography>
                <Typography variant="subtitle1" color="textSecondary">
                  by{" "}
                  {listing.creatorUsername.length > 16
                    ? `${listing.creatorUsername.substring(0, 13)}...`
                    : listing.creatorUsername}
                </Typography>
                <Typography variant="caption" color="textSecondary">
                  ${listing.price} each
                </Typography>
              </Box>
            </Box>
            <Box
              display="flex"
              alignContent="flex-end"
              justifyContent="flex-end"
              my={1}
            >
              <Box display="flex" alignItems="center">
                <Box mr={2}>
                  <Typography variant="body2">
                    ${listing.quantity * listing.price}
                  </Typography>
                </Box>
                <Select
                  name="quantity"
                  value={listing.quantity}
                  onChange={handleChange}
                  variant="outlined"
                  disabled={disabled.quantity}
                >
                  {getQuantityOptions(listing.numAvailable)}
                </Select>
                <IconButton onClick={handleDelete}>
                  <DeleteOutline />
                </IconButton>
              </Box>
            </Box>
          </Box>
        </Container>
      </Card>

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

The alignment of the arrow in the React Material-UI tooltip is off and not properly positioned relative to

I am encountering an issue with the alignment of Material Ui tooltip within Appbar. The tooltip is not properly aligned with the icon or the container. https://i.sstatic.net/ulF7k.png Similar issues arise when using a simple tooltip example from the docu ...

reactjsmaterial-ui

Utilize Jasmine's AJAX spy to intercept and inspect the error request

I am encountering an issue while trying to monitor the ajax error request and receiving the following error message. Can someone assist me with this? TypeError: e.error is not a function Code snippet for JS testing : function postSettings() { $ ...

javascriptjqueryajaxunit-testingjasmine

"The functionality of the personalized checkbox is not working as expected

Having an issue with my custom checkbox where only the first one gets selected when I select the bottom checkbox. I suspect it might be a styling problem, but I'm unsure. I've recreated the issue in a sandbox for you to check out: https://codesan ...

htmlcssreactjscheckbox

When using flexgrid, be aware that adjacent divs on the same row may shift position when applying floats

Struggling with aligning the divs in a row when floating one of them? Here's a snippet to illustrate the issue: .flex-grid { display: flex; justify-content:space-between; } .flex-grid .rcorners1 { border-radius: 25px; background: green; ...

htmlcssflexbox

Empty the localStorage when terminating the IE process using the Task Manager

Utilizing HTML5 localStorage to keep track of my application session has been a useful feature. Here is a snippet of the code I am currently using: if(typeof(Storage)!=="undefined") { if(sessionStorage.lastname=="Smith") { alert("Your ses ...

javascripthtml

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...

javascriptjquerycssjsonsearch

Including variables in package.jsonORInjecting variables into package

I'm currently developing a React application and I am trying to figure out how to pass a variable from the .env file into package.json: {"proxy": "ENV_VAR"} Is there a way to achieve this? In addition, our app is built using Docker. Is it possible ...

javascriptreactjsdockernpm

Insufficient image quality on mobile when using HTML5 canvas toDataURL

I've encountered an issue with the toDataURL("image/png") function. My canvas contains various lines, colored shapes, and text. While the resulting png image appears sharp on desktop Chrome, it becomes pixelated and low quality when viewed on mobile C ...

javascripthtmlhtml5-canvas

Sharing asynchronous data between AngularJS controllers

Among the multitude of discussions on sharing data between controllers, I have yet to come across a satisfactory solution for my particular scenario. In my setup, one controller fetches data asynchronously using promises. This controller then creates a co ...

javascriptangularjsangular-promise

Combining Angular 2 and Symfony 3 for seamless integration

I am currently working on integrating Angular 2 with Symfony 3. After using npm to install node modules, I encountered an issue linking them from my base view base.html.twig. Despite adding scripts, none of them seem to be working or appearing in the page& ...

javascriptangularsymfony

Guide to getting Material-UI Dialog up and running smoothly in your React application

I'm currently working on a project using material-UI, and I'm having trouble with the Dialog component not working properly. Despite trying various solutions, I haven't been able to get it to function correctly in my React application with m ...

javascripthtmlreactjsreact-reduxmaterial-ui

React is choosing to re-render only one of the setState functions, neglecting the other

I'm currently in the process of developing a basic Tic Tac Toe game using React. The Objective: Each button in the game has its own state. When a button is clicked, it should change from ' ' to an 'X' and update the player's ...

javascriptreactjsasynchronoussetstatetic-tac-toe

Executing a JavaScript function through C# code

Does anyone have a code snippet for calling a JavaScript function from C#? Here's the scenario: I have an ASP.NET page with an ASP button. When this button is clicked, I want to call a JavaScript function. For example: In my ASP.NET page, <but ...

asp.netjavascriptevents

Issues with the styling of DIV elements

Currently tackling a project that involves numerous DIVs and sections, encountering an issue with the header. When I attempt to minimize the browser window, the search bar and panes div are not staying within the "header" section as expected. The structur ...

csshtmlheaderposition

Is it possible to access the CSS property from an external CSS file even when inline styles are used?

Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...

jquerycss

What is the reason for the viewport in three.js renderer not functioning properly on IE browser?

Try setting the viewport with different coordinates: this.renderer.setViewport(50, -50, this.width, this.height); What could be causing issues with IE browser compatibility? ...

javascriptthree.js

Comparing React's Styled-components, JSS, and Emotion: Which is

As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries: jss emotion styled-component. I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking sp ...

cssreactjsstyled-componentsjssemotion

Preventing Users from Selecting Past Dates in Material-UI datetime-local TextField

I am striving to prevent selection of past dates but have not been successful so far. Below is the code snippet: <TextField variant="outlined" id="datetime-local" label="Select Date and Time" placeholder="Sele ...

javascriptreactjsmaterial-ui

Tips for preventing HTML ID clashes while integrating with the Document Object Model of external websites

When incorporating additional HTML elements into a webpage using Javascript or jQuery, along with external CSS declarations, it is important to avoid conflicts with existing IDs and class names already present on the page. This could lead to issues if ther ...

javascriptjqueryhtmlcssdom

Dynamic Creation of a jQuery Selector

Dear, I'm facing an issue while trying to load data dynamically into a table using JSON format. The data is coming from a PHP file. However, despite my attempts, the table remains empty and no data is being displayed. function fetchTableData() { ...

javascriptjqueryjson