General

React Table Dropdown Hiding inside the table

First of all thanks for visiting my blog and if you are also using React Tittle and using dropdown in it and you are also facing this problem

Plugin Name: react-data-table-component

NOTE: This will work for almost all tables.

So I am hoping that this problem is going to be solved in this article. I also had the same problem but now I have solved it.

First of all you have to see what is the class name of your table Like in my case the class name of my table is cdeMIC . Now check the default class of this class using inspect element. you can find it very easily by inspect element. After that copy the style and add it to a custom css file with this two line.

 overflow-x: visible !important;
  overflow-y: visible !important;

!important is required here. because the !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

Example:

.cdeMIC {
  position: relative;
  width: 100%;
  border-radius: inherit;
  overflow-x: visible !important;
  overflow-y: visible !important;
  min-height: 0;
}

Now go to your browser and CTL+f5

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *