React-admin: Two horizontal scroll in version ^2.0.0-RC3

[huynhsamha]

Hello, I'm using the react-admin version ^2.0.0-RC3, but I get an error on a table with multiple columns with 2 horizontal scroll (in body and table), the following image is my error:

I want only horizontal scroll in table and columns is not stretch, so can you support with options in

Thank you.

[fzaninotto]

Can you tell us which browser you use, on which system?

[fzaninotto]

I can reproduce it on Chrome mac with an extension to make the scrollbars visible. However I don't understand what could cause this...

[fzaninotto]

I suspect a bug cause by material-ui tooltips, because the (hidden) tooltips are the only element that go beyond the normal body width.

[fzaninotto]

I think it's related to https://github.com/mui-org/material-ui/issues/9362. Do the second scrollbar appear right after loading the page, or only after you resize the browser window?

[huynhsamha]

Hi @fzaninotto,
I'm using Chrome browser.
First, there is only one scollbar of the body on the window. After I inspected element on browser (that will
also resize the browser window), the second scrollbar appeared as my scnapshot (table has one and body also).

I'd like the toolbar with Add filter, Create and Refresh will be fixed on the top with the title of Resource. Current they is on the right of the table (when I load page or refresh, they can't be seen because it on the right).

And I'd like the columns is not stretched (content for some columns is only on one line, not go to new line).

[huynhsamha]

When I don't inspect element, I also get the problem as my following snapshot. The horizontal scrollbar of body is appeared with my large table (about 14 columns)

[huynhsamha]

Hi @fzaninotto,

I current fixed my problem by add some css:

.layout {
    .list-page {
    table {
        width: 100%;
        overflow: auto;
         th, tr {
                span {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}

But I'd like the toolbar with Add filter, Create and Search, and Paging appeared fixed on screen, not scroll to right to view

[fzaninotto]

When I don't inspect element, I also get the problem

Does it mean that it happens without resizing the browser window?

[huynhsamha]

Badly, I don't resize my browser, when i refresh page, the problem appeared. You can see my snapshot, the browser is filled all the screen of laptop.

Current, I also add my override css by

.layout { height: 100vh } 

That will make easier to scroll when my table having many columns

[djhi]

Would you mind setting up a codesandbox ? You can use this one as a starting point: https://codesandbox.io/s/p3nq3lyjzq

[afilp]

The following has been fixed by a "revert", but could it also be connected with the above behavior?
https://github.com/marmelab/react-admin/issues/1784

(just mentioning it in case it helps)

[afilp]

As an enhancement, do you think that the paging buttons should always be fixed to the right of screen (floating?), regardless of the horizontal scroll?

As it is now, you need to scroll horizontally 100% to be able to press the "Next" button.

[huynhsamha]

Hi @afilp
Sorry you, maybe my bad english made you misunderstand my think. I want the toolbar and paging buttons should fixed on the right of the screen, not the body or layout, that mean when we open page, they should appear and we don't need scroll horizontally 100% to able to view or press them.

[afilp]

@huynhsamha Yes, this is what I also mean for the paging buttons, they should be visible always regardless of horizontal scroll.

[fzaninotto]

this can be achieved using a custom Pagination component, see https://marmelab.com/react-admin/List.html#pagination

[afilp]

@fzaninotto I assume your reply refers to the custom pagination only part, correct? I mean that the issue is still open for the double horizontal bars? This issue makes the UI quite awkward for non-tech users, as they have to click on both horizontal scrollbars to get to the end (horizontally).

[fzaninotto]

Yes, you're right. But I have trouble reproducing this issue. In my experience, it only happens if I resize the browser window after loading the admin.

Could you describe a way to reproduce it all the time?

[afilp]

I will do some tests and let you know.

Just a note, I have this customization in CardActions so that the actions are not far away from the main screen, no need to scroll horizontally now:

const styles = {
    cardActions: {
        zIndex: 2,
        // display: 'flex',          
        // justifyContent: 'flex-end',
        // flexWrap: 'wrap',            
        position: 'absolute',           
        right: 0,                      
    },
};

const CardActions = ({ classes, className, children, ...rest }) => (

I doubt this is the reason, I just mention it.

[fzaninotto]

Fixed by #2206