Issue with Flex display not being applied within Material UI Grid Item

I am attempting to position an element at the end of a Grid Item (horizontally). In order to achieve this, I am enclosing my component in the following div:

Here is the complete code snippet:

<Grid container spacing={8} alignItems={'stretch'}>
  <Grid item xs={9} >
    ...other components
    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
      <p>hello world</p>
    </div>
  </Grid>
</Grid>

When I use the div outside the Grid, the element aligns to the right of the container, but it doesn't work when placed inside the Grid. It's worth mentioning that this Grid is imported from Material UI. Any assistance on this matter would be highly appreciated. Thank you.

htmlcssreactjsflexboxmaterial-ui

Answer №1

It seems like you were attempting to align "Hello World" to the right edge of the container by placing it inside a Grid with xs={9}. To achieve this layout, move your "Hello World" content within a Grid with xs={12}.

Here is the relevant HTML:

<div className={classes.root}>
      <Grid container alignItems={"stretch"}>
        <Grid item xs={9}>
          ...other components
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "flex-end",
              alignItems: "flex-end"
            }}
          >
            <p>hello world</p>
          </div>
        </Grid>
        <Grid item xs={12}>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "flex-end",
              alignItems: "flex-end",
              color: "red"
            }}
          >
            <p>I suggest making this adjustment... hello world</p>
          </div>
        </Grid>
      </Grid>
    </div>

Check out the working stackblitz example

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 a targeted div as a child component in React

How can I specifically pass a div with the class name 'message-content' as props.children, without including all the divs above it? <div className="message"> <div className="message-title-info">A ...

reactjstypescript

Issue with Bootstrap dropdown list not opening up

Having an issue where the Bootstrap dropdownlist is not displaying its list of contents when clicked. I attempted to add the jQuery library before the bootstrap.min.js file, as suggested in a solution on Stack Overflow, but unfortunately, it did not work ...

htmldrop-down-menubootstrap-4

Understanding the flow of block-level elements in documents when utilizing CSS :after pseudo selectors

What is the reason behind the block level element box appearing after the blue container's content instead of directly after the content box itself? Is it possible to achieve this using the CSS :after selector? TEST AREA CSS div{ background:#59 ...

htmlcss

How do I create a sliding dropdown notification bar?

Can anyone provide some guidance on how to create a sliding dropdown section for my homepage, similar to the one on this website: . (Please note, be cautious of potential malware) I'm interested in replicating the dropdown section that says "call for ...

javascriptjqueryhtmlcss

Accessing Protected API Endpoint Fails Following Successful Login in Node.js Express API

After developing registration and login APIs with Express, Mongoose, and Node.js, I am currently testing them using Postman. The registration and login functionalities are functioning properly, as the tokens are successfully stored in both cookies and head ...

javascriptnode.jsreactjsmongodbexpress

Preventing redirection when using Select within Link component in Navbar with ReactJS

I have a drop-down menu inside the navigation bar component below: const Navbar = (props) => { return ( <Link to='/'> <div className='navbar'> <img src={logo} className="A ...

reactjsreact-routerreact-select

JavaScript Time and Date Formatting

I'm pretty new to programming, especially in Javascript. Can someone help me simplify my code? I'm trying to create a dropdown for months and an input field for the year. Is there a more efficient way to make the month select box? Also, how can ...

javascriptjqueryhtmldatedatetime

The error message "Property 'value' is not present on type 'EventTarget & HTMLSelectElement'" indicates that the 'value' property is not recognized on the Event

Here is the code snippet that I am working with: interface IHandleSelection { (value: string): any | void; } interface IPipeChangeEventValueToFunction { (handler: IHandleSelection): (event: React.ChangeEvent<HTMLSelectElement>) => void; ...

reactjstypescript

Timeout function failing to properly clear asynchronous code

My react application is running into an issue with async calls in the setTimeout function. There's a condition where I want to clear the timeout, but even after it's cleared, the code inside still executes (I've checked and confirmed that th ...

reactjsasync-awaitreact-hookssettimeoutcleartimeout

"Step-by-step guide on incorporating a CSS file into an Isomorphic React application using Webpack

Currently, I am working on developing an isomorphic react application that utilizes express, react, and webpack. The setup seems to be functioning properly until I try to import a CSS file within one of my components. From what I understand, Node has troub ...

reactjswebpackbabeljsisomorphic-javascript

How can I use an HTML button to activate a function that inserts text into a read-only text-box?

Trying to write a simple piece of HTML code that finds the number greater than or equal to the first initial amount that wholly divides the second given amount. The code attempts to divide the numbers, and if it fails, increments the first number by 1 and ...

javascripthtmlbuttononclickgetelementbyid

Utilizing jQuery to access data stored locally

How can I retrieve and display all the values with key 'Task'? Below is the structure of the JSON data: {"Assignments":[{"AssignedBy":"537000","AssignedBy_FirstName":" JOHN","AssignedBy_LastName":"WANDER"}, {"AssignedBy":"537000","AssignedBy_Fir ...

jqueryjsonhtml

Changing the text link color on IOS can be achieved by modifying the CSS properties

Recently, I encountered an issue with the text link color of my website. While I had set the link color to red for desktop view, it inexplicably changed to blue when viewed on an iPhone. Even after trying to use !important, the problem persisted. Can som ...

htmlcss

How to avoid an additional carriage return in Internet Explorer when editing a Textarea?

In Internet Explorer, we are facing an issue with a multiline textarea. After setting the content using JavaScript and checking it, everything appears correct without any additional carriage returns in the textarea: document.getElementById( 'text-ar ...

javascriptjquerycssinternet-explorer

Creating an HTML list based on a hierarchical MySQL table structure

I have retrieved a hierarchical table showing different elements and their parent-child relationships as follows: id| name | parent_id | header 1 | Assets | 0 | Y 2 | Fixed Assets | 1 | Y 3 | Asset One | 2 | N 4 | ...

javascripthtmlvue.js

Implement an event listener on the final element of a webpage utilizing querySelector

I need help with a password security check feature that changes field borders to green or red based on certain conditions. Despite successfully implementing it, the JavaScript code only selects the first field (nickname) instead of the last one. I've ...

javascripthtmlselectaddeventlistenerqueryselector

Issue with scrollspy causing navigation items to not highlight correctly

If you want to track my progress, you can view it here - . Although clicking on the links in the navigation bar scrolls the page to the correct location, the link itself is not being highlighted. To address this, I had to incorporate an offset. var offset ...

jquerycsstwitter-bootstrapscrollspy

Incorporating additional value attributes without replacing the existing ones

Is there a way to add a value attribute through jQuery without removing the old attribute, similar to how addClass works? I have 7 input fields that are being typed in, and I need to combine them into one word and pass it to another input field. When I try ...

javascriptjqueryhtmlcss

Exploring the capabilities of NEXTJS for retrieving data from the server

When trying to retrieve data from the nextjs server on the front end, there is an issue with the code following the fetch() function inside the onSubmit() function. Check out the /test page for more details. pages/test const onSubmit = (data) => { ...

javascriptreactjsnext.jsfetch

"Reacting to RNG: A deterministic dice roller powered by react-three-fiber

I discovered a fascinating example of creating 3D dice using react-three-fiber on this link. My goal is to replicate this concept, but with deterministic rolling capabilities. I want the ability to generate multiple dice, specify their starting position, ...

reactjsreact-three-fiberdicecannon.js