search

patternfly / patternfly-react

A set of React components for the PatternFly project.
https://react-staging.patternfly.org/
MIT License
794 stars 356 forks source link

PF4: table resize issue #1790

Closed dlabrecq closed 5 years ago

dlabrecq commented 5 years ago

When we resize the browser window for the CostManagement UI, the table items resize to some extent, but eventually gets out of sync with the browser.

It appears that the table remains a minimum size, until the window reaches a certain point. Then, the table changes its responsive layout for a very small window.

Screenshots chrome-capture

See: https://github.com/project-koku/koku-ui/issues/767

mcoker commented 5 years ago

Try updating the gridBreakPoint to grid-xl.

dlabrecq commented 5 years ago

I see .pf-m-grid-xl in the HTML and it now breaks at 1200px. However, I still see the issue between 1200px and 1260px.

dlabaj commented 5 years ago

@mcoker Can you take another look at this to see if the 1200px and 1260px issues should be fixed in core?

mcoker commented 5 years ago

@dlabaj I believe this has to do with the width of the data in the cost management table. @dlabrecq we have since added grid-2xl as an option for gridBreakPoint, which will break the table to the grid layout at 450px. Will that work?

tlabaj commented 5 years ago

@dlabrecq did you try the grid-2xl breakpoint? is this still an issue for you

dlabrecq commented 5 years ago

I still see the issue when the window is resized between 1000px and 600px.

Are we expected to wrap the PF4 table component in a grid (i.e., isn't the table responsive itself)?

Note that I'm able to reproduce the issue with the PF 4 examples. This screenshot was less than 800px.

Screen Shot 2019-08-09 at 11 12 32 AM
mcoker commented 5 years ago

@dlabrecq it's up to the user to apply the correct grid breakpoint in their table to tell the table when to wrap. In the case above, the <th> content is causing the table to overflow its container since <th> doesn't/shouldn't wrap by default. We should either increase the grid breakpoint or shorten the <th> content.

There is also a .pf-m-wrap modifier you can use on the <th> cells to allow them to wrap, but in the case above I think we should do one of the options above.

dlabrecq commented 5 years ago

@mcoker Are you speaking about applying a modifier to the raw HTML from PF-core or the React table component?

I don't see any React table examples showing how to apply the .pf-m-wrap modifier or how to apply a grid-2xlbreak point. At least, I don't see how the React table component exposes the <th> cells directly?

It's possible that the React table component needs to be adjusted? I just don't see a way for end users to do it, unless you can point me to an example?

mcoker commented 5 years ago

@dlabrecq on https://patternfly-react.surge.sh/patternfly-4/components/table/ look for the "Table with headers that wrap" example. And the breakpoints are defined in the gridBreakPoint prop. For a 2xl breakpoint you would define gridBreakPoint="grid-2xl"

dlabrecq commented 5 years ago

@mcoker Thank you for clarifying. The gridBreakPoint="grid-2xl" seems to be working.