I'm using material-ui's Grid component, inside a ListItem. I'm trying to work out how to spread three columns worth of content across four columns of the material-ui layout, as follows:
Green lines indicate five of the twelve columns. In the first one is the red icon (ignore the margin to its left). That's clear. But then there are three pieces of content - Name, DOB, and an ID -- that are spread across the remaining four columns shown. The yellow lines indicate spacing between the three content pieces, which is supposed to be 1.5 rem.
I've forked a relevant material-ui demo here
If Grid items are the elements to be placed inside a Grid container, how do you handle spacing content inside an item?
EDIT: I've realized that a Grid container can indeed be nested inside a grid item, and have updated the codepen link to reflect that. What I now need to know is how to specify 1.5 rem in between each of the three content pieces. Their widths should be fixed such that the columns are respected even if the content piece is missing (e.g. there is no date -- the columns still need to stay in alignment)
Any help appreciated!
Related
I would like to make a table with resizable columns, where the columns start out automatically sized so that they are the width they need to be to contain the text that's in that column.
I have been able to achieve these separately, but not together.
It seems that the problem is that react-table requires you to use either FlexLayout, BlockLayout, or AbsoluteLayout to be able to resize the columns, but this causes table elements to be replaced with divs. When the divs are giving an "auto" width, each one individually fits to its contents, which creates a "brick wall" of stacked divs, and not a table where all the cells in a column are aligned.
Here is an example of the brick wall effect: https://codesandbox.io/s/nervous-goldstine-s12pve?file=/src/components/DataTable.js
Commenting out line 11, which sets the column widths to 'auto', will fix the alignment issues, but the columns will be wider than they need to be. If instead you comment out line 30, the column width issue will be resolved, but the columns will no longer be resizable.
Is it possible to have both of these features?
The problem is I have two columns that will be filled with rows that are implicitly defined, and that I DO NOT want to resize the adjacent row items such that there is a space beside the components. I have tried using grid, but the result is the second image. Similarly, I use flexbox, and the row space emerges implicitly. Does anyone know a way to get this kind of 'dense' packing as in the first image?
I have a series of buttons that I want to appear in columns at the bottom of my QML page. The number of columns across should depend on the width of the window, as the window width increases I want more columns to be added. (And fewer rows as a result as components are pulled up to the previous line)
This is sort of like a Flow component, but I want the items to appear in columns, evenly spaced across the page, in rows and columns (columns centered vertically, at the bottom of the page). Sort of like GridLayout.
I can't figure out what QML component(s) to use to achieve this.
I think what you're looking for is a GridView. See the layout documentation.
I'm not positive, but based on your description I think you would just need to set the flow property to GridView.FlowTopToBottom.
I'm new to Flexbox, Exponent, and React Native, so I'm not certain if I'm doing this correctly. Any help you can provide would be appreciated and I've provided a snack below that could be used as a starting point.
My screen has a header that's 40px tall at the top and a tab bar that's 40px tall on the bottom.
Between them, I'd like to have a full-width, full-height column that has rows of content with charts on the left, and a header (Billing, Budget, Labor) to the right of the chart with variable number of rows of data beneath the header. These rows have a key that's left-aligned (Invoiced, Not Invoiced, Total, etc.) and a value that's right-aligned (500.00, 250.00, 750.00, etc.).
Because the number of rows of data vary (3, 4, 3, etc.), I don't want to hard-code the heights of each chart row. I also don't want these rows to stretch/grow to the height of the center column, but allow for whitespace beneath them).
How can I build this so that:
1. Rows don't fill the height of the center column, but align on the top and leave whitespace below.
2. Charts are left-aligned next to their data.
3. Data figures/values (e.g., 500.00) are right aligned next to their keys (e.g., Invoiced).
Any help would be amazing. If you could provide a snack.expo.io, that'd be even better! Here's a rough example of what I mean, but you can see that the rows are stretching to the height (so there's a lot of wasted space and no empty space at the bottom) and the key/values in the data aren't justified so the key is on the left and the value is right-aligned.
https://snack.expo.io/HknEsZ5uz
I updated a few lines, does this look better? https://snack.expo.io/S1cF5bsdG
flex: 1 allows a view to fill all space available, so if you have two views on the same level of a hierarchy with flex: 1, both views split all vertical space equally. Read more: https://facebook.github.io/react-native/docs/layout-props.html#flex
Context for this question
We have a web page that has two scrolling grids, not paginated grids. When the first grid is nearly empty, occasional users do not realize they can scroll down to see the second grid. Other layouts (tabs, etc. are not a desirable solution).
Aside. The entire page layout is due for an overhaul, but on the Development schedule it's still 2 years away. Today, we cannot remove the grids, and we cannot change the general layout of this page.
When the first grid contains very little content, it would be good to auto-shorten the first grid so that the second grid peeks up above the fold. But when the first grid has lots of content, it's better if the first grid remains at its default height, because this grid is where the main interaction takes place, and we don't want excessive scrolling.
The challenge is that, in the grids, each row varies in height to fit its content. Sometimes a row is 2 lines of text, sometimes 12 lines of text. This causes a hard-coded height based on the number or rows inappropriate.
The question
What methods are there to assess the height of the row content in the first grid so that, if the total is less than the default grid height, we can shorten the grid? Or is there another way to look at this problem?