Tips for adjusting the width of items within the Box element in Material UI React

I am utilizing React Material UI along with the Box component to style my form. In this scenario, I have 4 items in each row except for the last row where I need to display only 3 items with the last item filling the entire row by merging two elements together. How can I achieve this when the Box component divides all my rows into 4 columns?

Here is my code:

<Box
    sx={{
       display: 'grid',
       columnGap: 2,
       rowGap: 3,
       gridTemplateColumns: {xs: 'repeat(7, 1fr)',
       sm: 'repeat(4, 1fr)'},
         }}
  >
First row with 4 columns:

    <TextField ....>
    <TextField ....>
    <TextField ....>
    <TextField ....>

Second row with 3 columns:

    <TextField ....>
    <TextField ....>
    //This column should span across two columns.
    <TextField ....>

</Box>
cssreactjsmaterial-uimaterial-design

Answer №1

Give this grid design a try:

import * as React from "react";
import { Box, TextField } from "@mui/material";

export default function CustomGrid() {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateAreas: "'a1 a2 a3 a4' 'b1 b2 c c'"
      }}
    >
      {/* First row with 4 columns: */}
      <TextField style={{ gridArea: "a1" }} />
      <TextField style={{ gridArea: "a2" }} />
      <TextField style={{ gridArea: "a3" }} />
      <TextField style={{ gridArea: "a4" }} />
      {/* Second row with 3 columns: */}
      <TextField style={{ gridArea: "b1" }} />
      <TextField style={{ gridArea: "b2" }} />
      {/* The following column should span two columns. */}
      <TextField style={{ gridArea: "c" }} />
    </Box>
  );
}

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

What causes the inconsistency in CSS Hover behavior?

Looking to devise a button in css and html that reveals another button below it by rotating on its lowermost axis when hovered over. Progress has been made here: http://codepen.io/machinarius/pen/BdtCb However, there seems to be an issue with the hover b ...

csscss-animations

Troubleshooting the Width Problem in Bootstrap 5 Dropdowns

I am currently working on a new project and encountering an issue with the width of a Bootstrap 5 dropdown. The problem lies in the discrepancy between the button width and the menu width. Although it may seem simple, I am having trouble resolving it as I ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Adjust Next.js form values according to the user's current session

I am completely new to working with React and Next.js, so please bear with me as I navigate through this. Thank you in advance for your patience. I am currently utilizing Shadcn form and other UI components to construct a user profile form that requires up ...

reactjsnext.jsreact-hooksshadcnui

What is the reason that the index is consistently the final index when utilizing it to pass to a function while iterating over an array with map()?

Currently, I am utilizing the map function to iterate over an array object fetched from the server. Each object within the array is used to populate a row in a table for displaying data. I need to perform a specific action for each row by invoking a functi ...

javascriptreactjsloopsmaterial-ui

My goal is to generate a collection of fullwidth ion-cards using data from an array of objects

I am attempting to iterate through an array of objects in order to generate a set of cards, either FULLWIDTH or halfwidth with the last one centered if the count is an odd number. I have created a component that contains the card layout and I am using *ng ...

cssangularionic-framework

Is there a way for me to input an event in handleSumbit?

I am having trouble understanding how to implement typing in handleSubmit. Can someone help? It seems that the "password" property and the "email" property are not recognized in the "EventTarget" type. import { FormEvent, useState } from "react" import { ...

reactjstypescript

What is the best way to retrieve the content of a specific class in Selenium WebDriver?

Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...

htmlcssseleniumselenium-webdriver

Launching a new tab with a specific URL using React

I'm attempting to create a function that opens a new tab with the URL stored in item.url. The issue is, the item.url property is provided by the client, not by me. Therefore, I can't guarantee whether it begins with https:// or http://. For insta ...

javascriptreactjstypescript

Encountering a problem while trying to import an image into a React JS application

I encountered this error message: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/showcaseimage.c2c0ae9f.jpg') is not a valid name. Why does this error occur when t ...

reactjs

What is the proper way to input information into fields during an update?

Let's talk about a scenario: I have a form created using Material UI components (TextFields) that I want to use for both creating and updating products. The product creation part of the form is working well, except when no image is added. For updati ...

javascriptreactjsaxiosmaterial-ui

`Uniform background color across all pages`

My goal is to allow customers to select a color that will persist across different pages on the website. The code below shows how users can choose a color on the first page: <select id="color" style="width: 5%; height: 10%" size="5"> ...

javascripthtmlcssasp.net

Issue encountered while invoking setState() due to a change in value of a select TextField within a Drawer component

I am currently working with a Material-UI Drawer that contains a TextField select input. When I click on an option in the dropdown, it clears the content of the entire page and triggers multiple errors in the console. As I am still learning React, I suspe ...

reactjsmaterial-ui

Pattern to locate a CSS class identifier

I've been working on creating a regex to match valid CSS class name structures. Currently, my progress looks like this: $pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)"; $regex = preg_match_all($pattern, $html, $matches); However, there are certai ...

phpcssregex

Struggling with Responsive Design Challenges with Grid Material UI?

Encountering an issue while using the Grid Component in my React JS Project. Let's delve into some code and then I'll explain what I aim to achieve with images: Assuming this is the rendered code: <div style="margin:100px 20%; width:80%" &g ...

cssreactjsresponsive-designmaterial-ui

Struggling to configure Sass with @snowpack/app-template-react-typescript

I'm struggling to integrate Sass with the @snowpack/app-template-react-typescript template. I attempted to follow the steps outlined in this guide, but so far I haven't been successful. I even created a new project and tried adding it, but not ...

reactjstypescriptsasssnowpack

Maintaining a fixed header that remains visible while scrolling through a dropdown menu in Angular

In my application, I have a mat-select widget that displays a list of options. When scrolling within the list, I find it difficult to keep track of all the options. I am looking to enhance the user experience by adding a fixed header at the top of the opt ...

htmlcssangulartwitter-bootstrapflexbox

What sets Next.js apart: Exploring the contrast between leveraging the "revalidate" option in getStaticProps versus utilizing the SWR package

One interesting feature of Next.js is the built-in "revalidate" option: export async function getStaticProps(context) { const data = await getData(); if (!data) { return { notFound: true, }; } return { props: { data }, reval ...

reactjsnext.jsswr

Utilizing References in React Components

One of the challenges I am facing involves a Container that needs references to some of its child components: const Container = () => { const blocks: HTMLDivElement[] = []; return ( <div> <Navigation currentBlock={currentBlock} ...

javascriptreactjstypescript

CSS selector that targets an element exclusively when it contains solely another element, devoid of any additional text

Is there a CSS selector that can target an element, like <p>, with only a specified child element, such as <a>, within it and nothing else? For instance: <p><a>Some text</a></p>. I want to avoid selecting elements like & ...

htmlcssbeautifulsoup

Stop bullet points from overlapping when using a floating left image in Internet Explorer 9 and above

Having trouble with bullets displaying in IE9+? Check out this link for more information: I've attempted to fix the issue by creating an ie.css file using conditional comments, but it hasn't worked. Can anyone provide assistance? ...

htmlcssinternet-explorer