Arrangement of items in a grid featuring a row of three items, each with an automatic width

I'm facing challenges with achieving a specific layout:

My goal is to have the left and right elements automatically adjust their width to cover all the empty space on either side of the center element.

Here is what I've tried so far, but I'm running into issues where the center item's width is fixed at 2 units out of 12 and the left and right elements are fixed at 5 units each:

<Grid container direction='row' alignItems='center' justify='center' style={{ width: '100%', textAlign:'center' }}>
    <Grid item xs='5'>
        <Divider />
    </Grid>
    <Grid item xs='2'>
        <span>or</span>
    </Grid>
    <Grid item xs='5'>
        <Divider />
    </Grid>
</Grid>

I am utilizing the material-ui reactjs library for this task. Any assistance or guidance, whether through the material ui library or CSS/JS solutions, would be greatly appreciated.

htmlcssreactjsmaterial-uigrid-layout

Answer №1

Instead of explicitly setting column widths (e.g., using xs='5'), try utilizing the concept of "Auto layout" columns in Material-UI by only specifying the xs attribute for items that need to stretch (i.e., have a flex-grow: 1 property). Avoid setting it for the middle item with text to prevent stretching and maintain auto width. A solution is illustrated below.

const { Grid, Divider } = MaterialUI;

function App() {
  return (
<Grid
  container
  direction="row"
  alignItems="center"
  justify="center"
  style={{ width: "100%", textAlign: "center" }}
>
  <Grid item xs>
    <Divider />
  </Grid>
  <Grid item>
    <span>or</span>
  </Grid>
  <Grid item xs>
    <Divider />
  </Grid>
</Grid>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e09285818394a0d1d8ced2ced0">[email protected]</a>/umd/react.production.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b697e7a786f367f74765b2a233529352b">[email protected]</a>/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<div id="app"></div>

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

Having trouble unchecking a checkbox in reactjs?

Hey there, I've been using a checkbox on my website and for some reason, I can't seem to uncheck it. Any ideas why? const [checkBoxEmailPersonalized, setCheckBoxEmailPersonalized] = useState(false); const onEmailPersonalized = (event) =& ...

htmlreactjs

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

I need to extract data from this website (disregard the Hebrew text). To begin, I must choose one of the options from the initial dropdown menu below: https://i.stack.imgur.com/qvIyN.png Next, click the designated button: https://i.stack.imgur.com/THb ...

pythonhtmlseleniumweb-scrapingscreen-scraping

Discrepancy in inner div presentation between Internet Explorer and Chrome

In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...

htmlcssinternet-explorergoogle-chrome

Unexpected issue encountered for identifiers beginning with a numerical digit

Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...

javascriptjquerycss

Issue with Favicon display in all versions of Internet Explorer

Visit my website. I have attempted multiple solutions found on Stack Overflow and different forums, yet I am unable to make it work. The code runs perfectly in all browsers except for Internet Explorer (regardless of the version) :( Can anyone provide ass ...

htmlinternet-explorerfavicon

The React Hook useEffect is missing dependencies which are 'match.params.id' and 'match.params.type'. You must either include them in the dependency array or remove them altogether

Hello everyone, I have created a movie app using a movie database API. When I navigate to the detail page, I check the React Router props match.params and fetch data with axios like this: Router <Route exact path="/:type/detail/:id" component ...

reactjsaxiosreact-router-v4

Toggle between dark and light themes within a non-material UI element

I want to implement a theme switcher in my app that will change the look of non-material-ui elements based on the chosen theme. However, despite setting the darkState to true and applying it to material ui components, some elements like the div below do ...

reactjsmaterial-ui

Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the clas ...

javascriptjquerycss

Overriding makeStyles CSS in Material UI Styling

When creating classes using makeStyles and useClasses, I've noticed that MUI CSS tends to take precedence over my custom styles unless I use the '!important' rule. Is there a way to override MUI styles without having to rely on '!import ...

cssreactjsmaterial-ui

Guidelines on storing JWT in a Single Page Application (SPA) built with React to efficiently manage subsequent requests following the authentication process

Currently, I am working on an ASP.NET CORE API solution and my goal is to allow multiple clients (such as SPAs, mobile apps, MVC applications) to consume data from this API. To secure the API using JWTs, I am planning to implement IdentityServer4. Now, m ...

reactjsjwtidentityserver4

HTML element DIV positioned above the iframe

I am looking for a way to automatically place a "PLAY" div above each iframe instead of doing it manually. I have successfully done it manually but I'm not sure how to achieve the same result with a script or using CSS. Below is my HTML markup: < ...

javascripthtmlcss

Error: Unable to Locate Module (Typescript with baseUrl Configuration)

Struggling to implement custom paths in my TypeScript project, I keep encountering the "webpackMissingModule" error due to webpack not recognizing my modules. I've attempted various solutions without any success. Any suggestions or ideas? Some packa ...

reactjstypescriptwebpackmodule

Visualize data from ajax call in tabular format

I want to display the results of an SQL query in a table using AJAX. I have written code that executes the query during the AJAX call, but when I try to display these values in a table, it shows null values on the div tag. What could be the reason for this ...

javascripthtmlsqlajax

Bringing in external modules to a web worker within a React/Webpack application

I have a React application bundled with Webpack and I am looking to improve performance by utilizing web workers. Specifically, I want to use a web worker for one of my components that exports data to a PDF. Since generating the PDF can be time-consuming a ...

reactjswebpackimportweb-worker

I'm looking to establish some custom print styles with MUI version 5.5.2. How can I

I'm interested in customizing print styling and I'm having difficulty finding information on how to accomplish this with MUI's themeing system. declare module '@mui/material/styles' { interface Theme { "@media print& ...

reactjsmaterial-ui

Crafting a dynamic inline search form with Bootstrap

My goal is to replicate the design in this image: This is my current progress: ...

htmlcss

Creating an Eye-catching Presentation: Tips for Adding Text to Your CSS3 Slideshow

I am currently in the process of creating a CSS3 slideshow with text for each image. I found inspiration from this example: . However, I made some modifications to make it responsive. Here is the HTML code I have used: <div id="slideshow"> < ...

htmlcss

Using a background image in the navigation menu with CSS

Looking to create a horizontal menu with a responsive background image. Struggling with the issue of the 'ul' menu being misaligned with the background image when in full-screen mode. Attempted to use separate 'div' containers for the ...

htmlcssimagemenubackground

Steps for resetting the input ref in a Material-UI textfield

How can I clear the input of a text field after a specific action? I keep encountering an error stating "The value of the input element, required for a controlled component." const emailRef = useRef<TextFieldProps>(null); // Clear logic ...

reactjsmaterial-ui

How can I display an image next to an element when hovering over it?

Whenever I hover over a .tags element, I want to display the image next to it. Feel free to test this feature on this specific page. This is how I envision it should look when not hovering over any .tags cell (the cells in the final column all have the ...

htmlcss