Project: datamanagement
Issue DM-5775: Change the TabPanel.jsx and TabPanel.css's properties to allow its children can be resizable
When an outside container is resizable (using css properties: resize: 'both', overflow: 'auto'...), in order for the child inside the container to be resizable, the child has to specify its height and width properties using percentage format (height: 90%, width:100%). When the TabPanel is used, the table is put on TabPanel. The table needs to access the size information of the outside container, ie,, the grandparent's width and height. The TabPanel has to pass the height and width to its child component. Without specifying the height and width in the TabPanel, by default, the auto is used. When the width (height) is auto, it allows to use the child's width (height). However, the child replies on the parent to provide such information. When this circular relations occur, the default size of the child is used. That is why the table component forever has 75px when it was put in the TabPanel. To be able to resize with the outside (root) contains all the ancestors of the component have to specify the width and height explicitly.
Story points: 1