ListView.InfoItems are not aligned with each other #1393
Comments
martinpitt
changed the title
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
|
bump |
|
@mcoker Is there something in css we could add for padding for this case? |
|
Hmm... the datalist can handle a "grid" type layout to a certain extent, but this is a case where it will be hard to align a group of items in one row with a group in another row. One thing you could do in this case is apply the following, so that the items grow to fill their parent (will change the spacing), but they're all based off of the same Will that work for you? Another option might be to look into the table component, as it's recommended if you need to display columns of information that need to align this way in a grid. |
|
@kmcfaul since this is pf3, we only want to introduce changes for high priority blocking changes (features, bugs, etc). @martinpitt would the option above help in your case, or can I help you re-work it so that it does? Or could you potentially consider a table for a layout where columns will align with one another in all rows? |
|
@mcoker @kybaker Of the three ListView issues then (#1392, #1393, #1394), are either of the other two besides #1392 slated to change? #1394 I haven't pinged on because it should be able to be done only on the react side, with letting a user has in a null/empty |
|
Hi @martinpitt. We are not taking on these couple PF3 ListView issues at this time, please refer to the workaround using |
At a lot of place, the duration for an item shows the raw value. It lacks an indication of the unit (ms, s or minutes??) and is not very human friendly. `480` is better understood as `8 minutes`. The `moment-duration-format` package enhance moment duration objects to ease formatting. It has better options than moment.duration.humanize(), notably it does not truncate value and trim extra tokens when they are not needed. The package does not have any extra dependencies. https://www.npmjs.com/package/moment-duration-format Format duration on the pages build, buildset and on the build summary. The Change panel had custom logic to workaround moment.duration.humanize over rounding (so that 100 minutes became '1 hour'). The new package does not have such behavior and offers tuning for all the features we had: * `largest: 2`, to only keep the two most significants token. 100 minutes and 30 seconds would thus render as '1 hour 40 minutes', stripping the extra '30 seconds'. * `minValue: 1`, based on the least significant token which is minute, it means any value less than one minute is rendered as: < 1 minute * `usePLural: false`, to disable pluralization since that was not handled previously. That reverts https://review.opendev.org/#/c/704191/ Make class="time" to not wrap, they would wrap on the Status page since the box containing is not large enough. In the Console, show the duration for each tasks, rounding to 1 second resolution. Would ease finding potential slowdown in a play execution. The tasks do not have a duration property, use moment to compute it based on start and end times. Since hostname length might vary, the duration spans might be misaligned. Use a flex to have them vertically aligned, credits to mcoker@github: patternfly/patternfly-react#1393 (comment) Thanks to Tristan Cacqueray for the React guidances! Change-Id: I955583713778911a8e50f08dc6d077594da4ae44
It would be really nice if the
InfoItems would behave more like table columns where they would always be aligned properly. This can already be seen in the official storybook:You see how the "8 images" is misaligned in the third column as "11" is wider than "7" or "9".
@tlabaj for PR review
The text was updated successfully, but these errors were encountered: