Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap?

(Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution for grid placement)

import Button, { ButtonProps } from '@mui/material/Button';
import GridLayout from 'react-grid-layout';

const TempButton = (props: ButtonProps) => (
  <Button
    {...props}
    variant="outlined"
    sx={{
      width: '100%',
      height: '100%',
      '&:hover': {
        backgroundColor: 'primary.dark',
        opacity: [0.9, 0.8, 0.7],
      },
    }}
  />
);

export const DeckLayout = (props: any) => {
  const layout = [
    {
      i: '1',
      x: 0,
      y: 0,
      w: 2,
      h: 2,
    },
    {
      i: '2',
      x: 2,
      y: 0,
      w: 1,
      h: 1,
    },
    {
      i: '3',
      x: 3,
      y: 0,
      w: 2,
      h: 3,
    },
  ];

  return (
    <GridLayout className="layout" layout={layout} cols={100} rowHeight={10} width={500}>
      <div key="1">
        <TempButton>1</TempButton>
      </div>
      <div key="2">
        <TempButton>2</TempButton>
      </div>
      <div key="3">
        <TempButton>3</TempButton>
      </div>
    </GridLayout>
  );
};

Explore this sandbox

Edit: It seems like the issue might be related to CSS. Modifying the stock example shows the expected behavior:

Check out the sandbox

cssreactjstypescriptreact-grid-layout

Answer №1

UPDATE: In a recent post, it was suggested that in order to achieve an accurate mapping of grid units to pixels, the margin={[0,0]} setting is necessary.

Check out the sandbox

It appears that there are some challenges arising from a combination of CSS and computational issues:

  • The default minWidth for MaterialUI buttons is 64px.

  • Calculation shows that the width of columns equals (Gridlayout width) / (Gridlayout cols). Applying this formula in the example above results in a column width of 5 px/col, which conflicts with the minWidth = 64px constraint.

Solution:

width: 100%

height: 100%

<GridLayout
   className="layout"
   layout={layout}
   cols={100}
   rowHeight={10}
   width={6400}
>

Complete fix:

import Button, { ButtonProps } from "@mui/material/Button";
import GridLayout from "react-grid-layout";

const TempButton = (props: ButtonProps) => (
  <Button
    {...props}
    variant="outlined"
    sx={{
      padding: 0,
      "&:hover": {
        backgroundColor: "primary.dark",
        opacity: [0.9, 0.8, 0.7]
      }
    }}
  />
);

export const DeckLayout = (props: any) => {
  const layout = [
    {
      i: "1",
      x: 0,
      y: 0,
      w: 2,
      h: 2
    },
    {
      i: "2",
      x: 2,
      y: 0,
      w: 1,
      h: 1
    },
    {
      i: "3",
      x: 3,
      y: 0,
      w: 2,
      h: 3
    }
  ];

  return (
    <GridLayout
      className="layout"
      layout={layout}
      cols={100}
      rowHeight={10}
      width={6400}
    >
      <div key="1">
        <TempButton>1</TempButton>
      </div>
      <div key="2">
        <TempButton>2</TempButton>
      </div>
      <div key="3">
        <TempButton>3</TempButton>
      </div>
    </GridLayout>
  );
};

View the updated version on sandbox

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

Tips for creating custom CSS to target a specific element within a group of similar elements

My cssSelector for locating elements is div.formErrorContent. There are 4 matched elements, but I need to pinpoint the first element. Can anyone assist me with this? I am aware of how to write the xpath code for this: (//div[@class='formErrorContent ...

cssselenium-webdriver

React-hook-form does not display the input length in a custom React component

Introducing a custom Textarea component designed for reusability, this basic textarea includes a maxlength prop allowing users to set the maximum input length. It also displays the current input length in the format current input length/max length. While ...

javascriptreactjstypescriptreact-hooksreact-hook-form

What is causing the cleanup function of useEffect to unexpectedly close a modal in Next.js?

I am currently working on implementing a modal dialog feature using the latest version of Next.JS (version 12.3.1). My goal is to have the modal open immediately, display a loading message while a request is being made, and then show the result of the requ ...

reactjsreact-hooksnext.js

All components load successfully except for the worker in Webpack

I've been working on configuring webpack to bundle my react project. I successfully set up the webpack_public_path variable and all modules are loading correctly, except for the worker. const path = require('path'); const MonacoWebpackPlugi ...

reactjstypescriptwebpackworker-loader

Issue: "Exported functions in a 'use server' file must be async"

I'm currently working on implementing layout.tsx in the app directory of Next.js 13 to create a navigation layout that appears on all pages. I've successfully configured it so that the navbar updates when a user logs out or signs in, but there&ap ...

reactjstypescriptnext.jssupabase

Searching Firebase by using comparison operators on various fields

const FindFiis = async () => { const data: any[] = []; // Firebase query with inequalities on different fields to retrieve docs. // Objective: Select documents where dividendYield is between 8 and 20 and pvp is less than or equal to 1. ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Creating a PDF file from a series of images

I've implemented a function using the jsPDF library to generate a PDF from a list of images. The main task is to add these images to the PDF document. Here is the code snippet: const { allImgs } = useAppContext() const doc = new jsPDF(); const gener ...

javascriptreactjspdfnext.jsjspdf

What steps need to be taken in VSCode to import React using IntelliSense?

When I press Enter in that image, nothing seems to occur. I believed IntelliSense would automatically insert import React from 'react'; at the beginning of the file. https://i.stack.imgur.com/7HxAf.png ...

typescriptvisual-studio-codeintellisense

Is it possible to prevent casting to any by improving type definitions?

My query can be best elucidated with the following code snippet. The comments within the code aim to provide clarity on the nature of the question. type MediaFormats = "video" | "audio"; type IMediaContent<TType extends MediaFormats, TValue> = { ...

typescript

Tips for keeping the hover effect of a sibling element in Material-UI

Card Component import image from "../../Assets/pic.jpg"; import React, { useState } from "react"; import { makeStyles } from "@material-ui/core/styles"; import Card from "@material-ui/core/Card"; import CardActionAre ...

javascriptcssreactjsmaterial-uiinline-styles

Implementing dual tooltips on a single component using Material-UI

Is there a way to display two tooltips on a button without encountering errors in the console? Here is my objective: https://i.stack.imgur.com/k2YED.png Below is a simple example to reproduce the issue: import * as React from 'react'; import { ...

reactjsmaterial-ui

Can I send a DELETE request with request body and headers using Axios?

When working with Axios in ReactJS, I am attempting to send a DELETE request to my server. In order to do this, I need to include the following headers: headers: { 'Authorization': ... } The body of the request consists of: var payload = { ...

javascriptreactjshttpaxioshttp-delete

Having difficulty locating audio files within a Next.js project

I am facing challenges when trying to import my audio files into a redux slice. Currently, I am attempting to retrieve my audio files from the app > public > audio directory. I have made efforts to access my audio files through 2 different director ...

javascriptreactjsnext.jsaudioredux

Error: Compilation was unsuccessful due to module not found. Unable to resolve in ReactJS

As I was wrapping up this task, an unexpected error popped up: Module not found: Can't resolve './components/Post' in ./src/pages/index.js I've tried everything to troubleshoot it but no luck. Here's a rundown of my code snippets ...

javascripthtmlcssreactjsreference

Exploring TypeScript reflections within a specific namespace

(Building upon previous discussions about dynamically loading a TypeScript class) If I am currently within a namespace, is there a method to reference classes within the namespace in order to utilize 'reflection' to invoke their constructors? n ...

typescriptreflection

After refreshing the page, the console log within the React useEffect function ceases to function

Incorporating the 'useEffect' function to fetch data and store it in the 'ratings' array has proven successful. However, there seems to be an issue when attempting to iterate through the elements of the 'ratings' array for log ...

javascriptnode.jsreactjsreact-hooks

Struggling to make the grunt.js task for postcss with autoprefixer function properly

I am currently facing issues with using postcss in conjunction with autoprefixer-core. Even though the css is being generated correctly, autoprefixer doesn't seem to be applying any prefixes. I have already installed postcss and autoprefixer via NPM ...

javascriptcssjsongruntjsautoprefixer

Find out the initial and final dates of a React calendar

Currently, in my React project, I am utilizing the "react-big-calendar": "^0.20.3", At the moment, I am employing the getDrilldownView={(targetDate, currentViewName, configuredViewNames) => this.updateDate(targetDate, currentViewName, configuredViewNam ...

reactjscalendarreact-big-calendar

``There seems to be a problem with the radio buttons where the selection disappears when

I'm facing an issue with a radio button group I created. It's functioning properly, but the selection disappears when clicked outside of the radio button. Can someone assist me in resolving this problem? Here is the link to the jsfiddle for refer ...

htmlcssradio-button

Is it possible to utilize the lighten css property within ngStyle in Angular?

Having some trouble with the lighten property in ngStyle and it's not working as expected. I have a color variable within my component that I want to utilize like so: <div [ngStyle]="{color: schedule.group.color, background: 'lighten(' ...

htmlcssangular