Material UI grid with 2 items: one aligned to the left and one aligned to the right in a single line

I'm struggling to understand how to effectively utilize Material UI's flexbox integration. I want to align items in a specific way, like this:

export default function Home() {
    return (
        <Grid container justify={"space-between"}>
            <Grid item>
                <Typography>Left text</Typography>
            </Grid>
            <Grid item>
                <Typography>Right text</Typography>
            </Grid>
        </Grid>
    );
}

However, I thought this alternative approach should also achieve the same result:

export default function Home() {
    return (
        <Grid container>
            <Grid item xs={6} justify={"flex-start"}>
                <Typography>Left text</Typography>
            </Grid>
            <Grid item xs={6} justify={"flex-end"}>
                <Typography>Right text</Typography>
            </Grid>
        </Grid>
    );
}

Unfortunately, the latter method does not produce the expected outcome. Can someone help me figure out what I'm doing wrong?

Answer №1

By not specifying the Typography component type, it will automatically generate a <p> tag, which is considered a block-level element. For more information, refer to the official documentation: https://material-ui.com/api/typography/ Although you were close in aligning something correctly, the alignment actually affects the entire 6 columns instead of just the text itself.

To align text on the right using the "Right text" Typography component, try this:

<Typography align="right">Righttext</Typography>

UPDATE: Another option is to add the container prop to the Grid component. This allows you to use the justify property like so:

<Grid item container xs={6} justify={"flex-end"}>
    <Typography>Right text</Typography>
</Grid>

When you include the container prop in the Grid component, its children become flexible elements. This removes the need to determine the HTML tags generated by each Material component when rendered.

You can explore this behavior further in the following example from the Material docs: https://material-ui.com/components/grid/#nested-grid

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

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

I've been searching for the answer to this problem without any luck. I have a page with jquery ajax calls to an API service. It works well in Chrome, Safari, Firefox, and IE 10, but fails in IE 9 and 8. Here is the code: $.ajax({ ...

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...

Attempting to use jQuery AJAX to submit data without navigating away from the current webpage

Trying to implement the solution provided in this post where I am trying to send data to a PHP page and trigger an action, but unfortunately, it seems to just refresh the page without any visible outcome. Even after checking the network tab in the element ...

The div element is not extending all the way to the left side of the browser window

I'm having trouble positioning a menu at the top of my webpage following a tutorial. The menu icon doesn't seem to reach all the way to the left side of the page. Despite multiple attempts to adjust the margin and padding settings, I can't ...

Switch between showing and hiding a div by clicking on the panel header and changing the symbol from + to

I need assistance with a panel feature on my website. The panel should expand when the "+" symbol is clicked, displaying the panel body, and the "+" symbol should change to "-" indicating it can be collapsed by clicking it again. There is a slight twist t ...

Creating an engaging Uikit modal in Joomla to captivate your audience

I need help optimizing my modal setup. Currently, I have a modal that displays articles using an iframe, but there is some lag when switching between articles. Here is the JavaScript function I am using: function switchTitleMod1(title,id) { document.g ...

Tips on showcasing jQuery autocomplete suggestions on different fields?

Seeking assistance with jQuery and autocomplete as a newcomer to the technology. Despite extensive research, I am struggling to understand how to showcase query results on a website. The code below is nearly identical to the example on the jquery autocomp ...

"Encountering a problem with a function showing an undefined error

Trying to incorporate a slider feature into my application led me to reference this w3schools sample. However, upon loading the page, the images briefly appear before disappearing. Additionally, clicking on the arrow or dots triggers an error stating: U ...

The functionality of hovering over a textfield stops working once you start typing

My textfield component is supposed to set a value and resize every time the mouse hovers over it. However, this functionality stops working after typing in the textfield, and I'm unsure why. You can view the code here: https://codesandbox.io/s/materi ...

Ways to utilize two distinct XPATH values for a single key

When dealing with Xpath for the same object in two different portals, the paths can be: //*[@id="abc"]/fieldset/div/div/div[1]/label //*[@id="xyz"]/fieldset/div[1]/fieldset/div/div/div[1]/label In order to use both values in the same key and have Seleni ...

Display an image overlaying a div

I am attempting to position an image outside of its parent div in such a way that it appears to be sitting on top of the div without affecting the height of the parent. However, no matter what I attempt, the image consistently gets clipped by the parent di ...

What is the method to ensure that flexbox takes into account padding when making calculations?

There are two sets of rows displayed below. The first row contains two items with a flex value of 1 and one item with a flex value of 2. The second row contains two items with a flex value of 1. As per the specification, 1A + 1B = 2A However, when ...

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

Position the scroll down arrow at the center bottom of a full-screen div using WPBakery Visual Composer

I have a series of full-screen sections in Visual Composer and I am trying to add an arrow at the bottom of each one to indicate to users that they should scroll for more content. However, my attempts with absolute positioning on the divs containing the ic ...

Chrome DevTools automatically translates all HEX color codes into their corresponding RGB values

Chrome DevTools now automatically converts all HEX colors to RGB values, even if the color is set in CSS or using DevTools. Is there a way to prevent this conversion? I know about the method of holding down Shift + clicking the color icon to convert color ...

Begin by opening a single div for each instance

I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...

Tips for aligning sections of a navigation bar in different directions: left and right

I'm attempting to float a logo to the left side of a nav bar and have the text float to the right of the nav bar using Bootstrap. I've tried adding float and text align classes to outer divs and specific elements but haven't had success yet. ...

Develop a program in Python using Selenium to automate web scraping in a loop

I am looking to create a loop that will allow me to extract the individual time figures for each horse in all eight races from the at the races website. Here is an example of the first race (17:15) out of the eight: from selenium import webdriver from s ...

The intervals in hooks seem to be malfunctioning and not updating the date and time as expected

I am trying to continuously update the date and time every minute using React hooks. However, I am facing difficulty in updating the time properly. const Link = (props) => { let date = new Date(); const [dateTime, setDateTime] = useState({ cu ...

Using the sx attribute with a personalized component

I have a unique layout component that generally serves its purpose well, but I have encountered a few cases where I need to customize the styles. Instead of using a custom prop for toggling these styles on or off, I would prefer to simply pass the specific ...