The DataGrids effortlessly expanded to accommodate their parents without the need for a horizontal scrollbar, showcasing their full capacity

After conducting numerous tests on simpler models, I have come to realize that the display of DataGrids Pro has been altered in MUI v6, rather than being a result of something I had broken initially.

My workplace utilizes multiple DataGrids with columns having a minWidth property. These columns are plentiful, and if left unchecked, would extend beyond the viewport. However, they remain contained within specific containers to prevent this issue, resulting in horizontal scroll bars for the DataGrids.

Upon upgrading to MUI DataGrids Pro v6, all these DataGrids suddenly expanded their parent containers to accommodate them fully without requiring horizontal scroll bars. These data grids were children of containers styled with "width: 100%".

To facilitate comparison and inspection, I have devised a simplified model. Ensure that it features numerous columns with the minWidth property and that @mui/material is at version 5.11.15.

     <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        height: 520,
        width: "100%",
      }}
    >
      <Box
        sx={{
          width: "100%",
          backgroundColor: "#fff",
        }}
      >
        <DataGridPro rows={rows} columns={columns} />
      </Box>
      <Box
        sx={{
          width: "100%",
          backgroundColor: "#fff",
        }}
      >
        <DataGridPro rows={rows} columns={columns} />
      </Box>
    </Box> 

The appearance of Data Grid Pro will differ between versions:

Version 5.15.0: V5

Version 6.0.3: V6

In the sixth version, due to the presence of two adjacent data grids filling the space equivalent to two screens because their parents have a width set to 100%.

Additionally,

I am aware of some potential solutions, but they do not yield the same results:

  1. Using flex instead of minWidth may help them fit better, but the aesthetic appeal changes, especially when dealing with over 20 columns.

  2. Restricting the width using vw or px values can superficially address the issue, yet it compromises the flexibility in resizing and relocating data grids within other components like accordions. Moreover, there seems to be an anomaly related to flickering when a column is initially pinned - adjusting its width causes the data grid to oscillate between two sizes, creating a flickering effect.

Although I perceive the problem as straightforward, I am perplexed by the discrepancy between DataGrid v6 and v5. I appreciate everyone's assistance in resolving this matter!

Answer №1

For version 6, I had to utilize the overflow property set to 'hidden' on the parent element to resolve the issue at hand. Interestingly enough, it seems like we encountered the same problem.

Here is an example:

<Container styles={{overflow: 'hidden'}}>
   <EnhancedTable rows={rows} columns={columns} />
</Container>

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

Bizarre Drop-down Peculiarities

Having a perplexing issue where the 'search' list item is oddly shifted below the dropdown box only when it is displayed. The other list items remain in their correct positions. Any advice on how to resolve this? The appearance and functionality ...

Create a grid div that expands vertically to completely fill the available space

I am encountering an issue with my grid layout involving the menu, header, and content. The problem lies in the fact that I want the content (blue box) to expand vertically within the grid element (yellow box). Currently, the grid stretches vertically, bu ...

Trouble arises when extending an MUI component due to a TypeScript error indicating a missing 'css' property

We have enhanced the SnackbarContent component by creating our own custom one called MySnackbarContent: export interface MySnackbarContentProps extends Omit<SnackbarContentProps, 'variant'> { variant?: MyCustomVariant; type?: MyCustomTy ...

Tips for altering the color of an image using CSS attributes

I am looking to create a male Head component in this design draft and modify the CSS according to the skin prop. I have attempted to use filter and mix-blend-mode properties, but have not found a solution yet. Any guidance on how to achieve this would be ...

Innovative HTML5 Video Canvas Shapes

I'm currently working on creating a circular frame or canvas for live HTML5 Video. While I am able to round the corners using keyframes radius property, it results in an oval shape rather than a circle. My preference would be to utilize a div object ...

Trouble with CSS animations in ThreeJS's CSS3DRenderer

Seeking a way to incorporate plain text (2D or 3D) into a threeJS scene while applying CSS effects, I stumbled upon this resource. It seemed to offer the solution I was looking for. However, when I tried to apply an animate.css class (a well-known CSS anim ...

Arrange flex list items in vertical rows on smaller screens for a more organized layout

Struggling to have CSS flex list stagger text on two lines for smaller screens, but so far, my attempts have failed. I've tried using spans and br at various media queries, but nothing seems to work. Any assistance would be greatly appreciated. This ...

Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value

Upon loading my page, I aim to have some of the div elements hidden initially and display only one. Here is a script that accomplishes this goal: <script> $(document).ready(function () { $(".total").click(function () { $("#pi ...

Form alignment issue: Bootstrap justify-content feature not functioning as expected

I am having trouble aligning my input form that is designed to capture Twitter handles in the center of the page. Despite using Bootstrap and ASP.NET, I cannot seem to get it to work as intended. Here is a snippet of the relevant CSS/HTML code: <form ...

Tips for aligning three <p> elements side by side using flexbox

I need assistance with aligning three boxes next to each other, each containing an image, header, and text. The issue arises when resizing the browser, causing the content in box 2 and 3 to be positioned higher than box 1. Below is the code I have been us ...

Eliminate unnecessary space from a Bootstrap 4 Card

Using the Card class from Bootstrap 4, I'm struggling with an extra space on the right side: https://i.sstatic.net/5qb8y.png (Please ignore the 'porno' thing, haha). You can clearly see the extra space on the right. I've been attemp ...

Social media icons condensed into a single line within a compact menu

I have come across a problem that I can't seem to solve. How can I display social icons in one line within a collapsed menu? I added the following code to my CSS file but nothing seems to have changed. Any suggestions or ideas would be greatly appreci ...

What steps should we take to ensure that the container beside the fixed left navigation bar is responsive?

Currently, I am working on creating a user interface that features a fixed navigation bar on the left hand side and a responsive content window. Here is what I have implemented so far: <div style="width: 15%; float: left; display: inline;"> <na ...

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

Just wanted to share my experience in case it helps someone else out there! I've been working on an Angular project where I needed to create a Trello-like application. To enable dragging elements from one list to another, I installed the Angular cdk ...

What is the best way to align the navigation with a maximum of three elements (lists) in a row using responsive design?

I've been trying various methods but haven't been able to center it while keeping the padding intact. It's a mobile navigation bar. Here is what my code is producing currently: [1]: https://i.sstatic.net/sHEjj.png This is how I want it to ...

Stack 2 cards inside a DIV vertically using Materialize CSS

My form and table are currently positioned side by side in 2 columns: https://i.sstatic.net/croh3.png The layout of this form/table is built using datatable + materialize CSS. I am looking to place the Form and table within a div to ensure that the bott ...

Can a class be created using a PHP variable as its basis?

Is it possible to define the body color based on a variable in PHP? I have been experimenting with different methods to achieve this. <?php $seperate_sitting_yes = "Yes"; if($seperate_sitting_yes == "Yes") { ?> <style type="text ...

tips on adjusting images to the size of the screen without them being on html files

I understand that sharing links may not be appropriate for this forum, but I'm unsure how else to seek assistance. My apologies for any inconvenience. I am currently working on a website for a doctor, and the image you see is of a patient. I'm ...

Styling Angular Datatables with CSS

i have data on the front end https://i.stack.imgur.com/2xq7a.jpg i need all check marks to be displayed in green color. Below is the code snippet: $scope.dtColumnsCal= [ DTColumnBuilder.newColumn('name').withTitle('Name') ...

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...