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:

https://i.sstatic.net/a5ETh.png

https://i.sstatic.net/I7fuS.png

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

`Thoughts on Difficulty Attaching Child Elements in JavaScript with appendChild`

I am having trouble with appending some HTML that is being received as a string in a div. For some reason, the appendChild method is not working as expected. Here is my JavaScript code: var doc = document.getElementById("products"); var notes = doc.getEle ...

javascripthtml

React encountering a 400 Bad Request Error with Axios

I've gone through all the posts about Axios 400 bad request, but I still can't find a solution. In my useEffect function, I first fetch data from my API and later on, depending on certain conditions, I may need to make a POST request back to the ...

node.jsreactjsexpressmongooseaxios

Generating interactive cards using an array

In an attempt to showcase information for three separate months using a single component, I am creating cards titled "Month 1," "Month 2," and "Month 3." Each card contains a table, and I am aiming to add headers to each card based on an array of titles. ...

arraysreactjsdynamicmaterial-uireact-props

Retrieve an image located outside of a container

I have multiple SVGs inside separate div elements. <div id="divA"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="130" width="500" style="fill: #000000"/> ...

javascriptjqueryhtmlsvg

What method does Apple use to apply overflow:hidden to elements within position:fixed?

After conducting my own experiments and delving into the topic online, I discovered that elements using position: fixed do not adhere to the overflow: hidden property of their parent element. This also applies to children within the fixed positioned elemen ...

htmlcssoverflowcss-position

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

javascripthtmlcss

The ng-change event fails to trigger when the date change event is activated

Hey there, I'm new to working with AngularJS. I have a scenario where I want a method to be triggered when I change the date, opening a modal. However, when I use the ng-change event, the method is not called upon date change. If I switch to using ng- ...

javascripthtmlangularjstypescript

Ensuring Compliance with GDPR through Cookie Consent Logic

Since the introduction of GDPR, I find myself in need of clarity on the steps to take both server-side and client-side to ensure compliance. Apologies for the plethora of questions. I currently have a first-party cookie that is used to store a session coo ...

javascriptreactjsexpresscookiessetcookie

Tips for creating a wide mobile menu

I am attempting to make the mobile menu full width, but so far my efforts have been unsuccessful. #menu-main-2 { background-color:#FFFFFF !important; padding-left:15px; max-width: unset; width: 100%; } view mobile menu ...

csswordpress

Using Jquery to add new HTML content and assign an ID to a variable

Here is some javascript code that I am having trouble with: var newAmount = parseInt(amount) var price = data[0]['Product']['pris']; var id = data[0]['Product']['id']; var dat ...

javascriptjqueryhtml

When requiring '@material-ui/icons' in Jest, it returns as undefined

Every time I attempt to use require or require.requireActual in jest to import '@material-ui/icons', jest reports it as undefined. I suspect this could be a bug/issue, as it seems unlikely for any export to be undefined for require. The file bei ...

reactjsjestjsmaterial-ui

Why is the editor not displaying the correct line number when the enter key is pressed repeatedly in JavaScript?

I am currently working on developing an editor using JavaScript. My goal is to display a line count (e.g., 1, 2, 3) whenever the user presses 'Enter' to change lines. I have successfully managed to count the line changes upon pressing 'Enter ...

javascripthtmleditorkeyevent

Why do my tablet media queries take precedence over mobile view media queries?

I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening? Here is how I have set it up: /* X-Small devices (portrait phones, less t ...

cssresponsive-designmedia-queriesstyling

Is it possible to use reactjs and react-router to showcase either a component or {this.props.children}?

Here's the scene: I have multiple components where certain words can be clicked to link to a reference page/component. If the highlighted words are not clicked, the component is displayed as is (and there are many of them with this feature and a menu ...

javascriptreactjsreact-routersingle-page-application

Ways to invoke a method in the parent component using a component/reactnode passed as props in a React application

I need to customize the Button component inside my Toast component. When I click on this custom button, I want it to call a method within the Toast component. Here is an example of how you can use the Toast component: const actionButton = ( <Mybutton ...

javascriptreactjsreact-native

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

I am encountering an issue where I consistently receive a keyCode of 229 in Android Chrome browsers when running either: <input type="text" (keydown)="testKeyCodes($event)"/> <!-- or --> <input type="text" (keyup)="testKeyCodes($event)"/& ...

javascriptandroidhtmlangularevents

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

javascripthtmlfirebasefirebase-realtime-database

Unable to establish connection between Router.post and AJAX

I am currently in the process of developing an application to convert temperatures. I have implemented a POST call in my temp.js class, which should trigger my ajax.js class to handle the data and perform calculations needed to generate the desired output. ...

javascripthtmlnode.jsajaxexpress

Guide to executing Jest tests with code coverage for a single file

Instead of seeing coverage reports for all files in the application, I only want to focus on one file that I am currently working on. The overwhelming nature of sifting through a full table of coverage for every file makes it difficult to pinpoint the spe ...

reactjstypescriptjestjsreact-scripts