Setting the minimum width for a grid item in a React Material UI component

Is there a way to ensure that a material-ui Grid item has a minimum width of 250 pixels? I've tried using the sizing suggestions from Material UI's documentation, but haven't had any success. The 'logo' element within the Grid container keeps shrinking below 250px when the window size is reduced. This causes the red grid item containing my data to overlap with the logo.

Does anyone know how to set a minimum width for a Grid item in Material UI?

<Grid
    container
    direction="row"
>
    <Grid item xs={3}  >
        <Box width={250}>
            <img src={Logo} key="logo" width="250"  height="100" alt="Logo" />
        </Box>
    </Grid>
    <Grid item style={{ backgroundColor: '#f22' }} xs={9}>
        <Grid
            container
            direction="row"
            justify="flex-start"
            spacing={2}
        >
        {this.panelGrid(eventID, panelData)}
        </Grid>
    </Grid>
</Grid>
cssreactjsmaterial-ui

Answer №1

Here is a suggestion for you to consider:

<Grid item xs={3} sx={{minWidth: '250px'}}  >

Answer №2

If you want to ensure that a Material-UI Grid item has a minimum width of 250 pixels, you can achieve this by setting the minWidth property in the item's style using CSS. Below is an example of how you can make the necessary modifications:

<Grid container direction="row">
    <Grid item xs={3} style={{ minWidth: 250 }}>
        <Box width={250}>
            <img src={Logo} key="logo" width="250" height="100" alt="Logo" />
        </Box>
    </Grid>
    <Grid item style={{ backgroundColor: '#f22' }} xs={9}>
        <Grid
            container
            direction="row"
            justify="flex-start"
            spacing={2}
        >
            {this.panelGrid(eventID, panelData)}
        </Grid>
    </Grid>
</Grid>

Answer №3

One solution is to implement CSS min-width as shown here: The MDN page contains more information on this topic.

<Grid
  container
  direction="row">
<Grid item xs={3}  >
    <Box width={250}>
        <img src={Logo} key="logo" width="250"  height="100" alt="Logo" />
    </Box>
</Grid>
<Grid item style={{ backgroundColor: '#f22', min-width: '250px' }} xs={9}>
    <Grid
        container
        direction="row"
        justify="flex-start"
        spacing={2}
    >
    {this.panelGrid(eventID, panelData)}
    </Grid>
</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

Leverage References in Material UI

I am attempting to utilize Refs in Material UI for updating Image src, but I am encountering an 'Undefined' error. It seems that the link is being generated but not applied as the Image src. My intuition tells me that the issue lies in line 10. ...

reactjsmaterial-ui

What is the best way to display the content of a swagger.json file in a

I am currently working on developing a document portal for my API's using Express and ReactJS. My goal is to retrieve the JSON content (swagger.json) from the Express server and present it in Swagger UI on the client side. While exploring the documen ...

node.jsreactjsexpressswaggernodejs-express-server

What is the best way to store a username and password within a JavaScript object in ReactJS?

I am encountering an issue with obtaining the login credentials from the object. Although the code snippet below functions perfectly well with other forms. SignIn.js export default function SignIn(props) { const [state, setState] = useState({ userna ...

javascriptreactjsrest

React Helmet includes <script type="application/ld+json"> right after the closing </html> tag

After integrating a third-party widget on my website to display Rich Snippets stars, I encountered an issue where the ld+json markup was not being recognized by Google's bots and structured data testing tool. This was because the markup was placed out ...

reactjswidgetfrontendreact-helmet

Incorporating external CSS links in the metadata of Next.js 13

A recent update in Nextjs 13 introduced a new feature known as Metadata (https://nextjs.org/docs/app/api-reference/functions/generate-metadata), causing the removal of Head.js. Previously, I would import a CSS file using the <Head> tag as shown below ...

javascriptreactjsnext.jsnext.js13

What's the best way to determine the event type when a mouseDown occurs in React while working on a canvas?

I've been tackling the challenge of incorporating the <canvas /> element into a react project, but I'm encountering difficulties with determining the appropriate event type for it. In my quest for answers, I stumbled upon this insightful ar ...

reactjstypescriptcanvasevent-handlingonmousedown

The height of the div element is causing issues for the adjacent item in the row

I am facing a styling issue where the height of my avatar image is affecting other inline items located next to it. The images below demonstrate this problem. https://i.sstatic.net/bovge.png https://i.sstatic.net/EsF2R.png As you can see, when I increas ...

css

Setting up routes in React and Rails configuration

I am currently working on developing a simple todo application using rails 4 and react. This project is geared towards helping me learn how to integrate react with rails, but I am facing some challenges when it comes to coding my rails controllers. As ...

ruby-on-railsruby-on-rails-4reactjs

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

cssangularangular-material

What is preventing Axios For Loop from enabling me to modify data in React?

Currently in the process of developing a React application utilizing Axios. During a function call to useNames(allNames), an array of names is passed in to be iterated by Axios. Everything seems to be functioning properly initially, but upon inspecting the ...

reactjsaxiosgoogle-chrome-devtoolslodash

When using next.js, a warning may be encountered that states: "A value of NaN was received for the `children` attribute. To resolve this, ensure the value is cast as

I am currently tackling my first Next.js project and have created a file called myCart.js. Below is the code snippet: function orderCard(arr1) { //Code here... } let noRefresh; function makeGetRequest() { //Code here... } export default makeGetReques ...

javascriptreactjsnext.js

Seamless animated loading gif as a looping background visual

Is there a way to find a GIF that can be used as a repeated background on an HTML element, creating the illusion of a seamless block? https://i.sstatic.net/5BKxW.gif (source: opengraphicdesign.com) I am looking for an 80x80 GIF that can be repeated as ...

cssanimated-gif

Slideshow featuring cards with text overlay

I am working with a bootstrap carousel and trying to place a card with text on top of it. No matter what I try, the card is not appearing as desired. Here is an example of what I want to achieve: https://i.sstatic.net/tjW3w.png Below is the code snippet: ...

htmlcsstwitter-bootstrapbootstrap-4

Facing Quick Refresh Problems: The NextJs is currently experiencing issues when used with a local package. Is there a way to manually clear the cache to ensure smooth development

I have developed an application using NextJs along with React and mobx-state-tree (although it could also be context or redux) as the package manager. I have structured all the stores in an npm package named SMK (state management kit) that I created to ena ...

reactjsnext.jsfast-refresh

Creating a vertical navigation menu and displaying its submenu on corresponding pages in a horizontal layout

I'm struggling to design a navigation layout for my website where I want to display the main menu items like this: Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 and have their respective sub-menus displayed horizontally on their main menu pages like this: ...

htmlcssmenu

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

I am currently working on a website that features the following structure: <body> <section></section> <section></section> ... </body> To prevent scroll bars on the body, I have set the CSS property body{overflow:hidden ...

cssscrolloverflow

What is the best way to eliminate the gap between inline-block elements?

I'm trying to make two inline-block divs with width: 50% each fit on one line. <div class="inline">Left one</div> <div class="inline">Right one</div> I know a practical solution, but I also want my code to look nice. <div ...

htmlcss

Having trouble with the width of the Material-UI drawer feature

Encountering an issue with the material-ui drawer. I adjusted the width of the drawer container, which led to a problem where the drawer remains slightly inside the page and visible without clicking the button. It seems to be related to the transform attri ...

javascriptcssreactjsmaterial-uireact-component

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

javascripthtmlcssgoogle-chrome-extensionsidebar

Issue with AJAX show/hide causing scrolling to top

I've implemented ajax show hide functionality to display tabs, but whenever I scroll down to the tab and click on it, the page scrolls back to the top. You can check out the example code in this fiddle: http://jsfiddle.net/8dDat/1/ I've attempt ...

javascriptajaxcss